Question

I have a Div Container which holds 4 <li>

What I am doing is prepend a <li> into the <ul> and remove the last <li>

I did that quite easily using

$('#news-ul li:last').remove()
$('#news-ul').prepend(str);  //str contains a <li>

I want to have scroll effect when the <li> is prepending. How to achieve this?

Answer 1

I’m not sure I’m getting you right, but if I am, I’d first create a new element:

var newEle = $(str);

Then prepend it, hide and animate

$('#news-ul').prepend(newEle);
$(newEle).hide().slideDown();

Hope this helps.

Edit, more code:

Take a look at http://api.jquery.com/category/effects/ If I were to recreate the twitter effect it would probably be:

$('#news-ul').prepend(newEle);
$(newEle).fadeTo(0,0.01,function(){
    $(this).hide().slideDown('normal',function(){
        $(this).fadeIn();
    });
});

A quick description, first we add the element as before, then fade it out to 1% opacity in 0 seconds (at 0 opacity it has no height), then, when we know its faded, we issue a callback, hiding the element completely, issue the slidedown with a normal speed, when done sliding, we issue another callback fading it in.

Warning: The above code is untested, use at your own risk ^^