JQuery animation ul list

Question

<style>
.myNewsSlider
{
width:200px;
height:44px;
overflow:hidden;
position:relative;
 }

 .myNewsList
 {
margin:0px; 
padding:0px;
position: absolute;
 }
</style>

<div class="myNewsSlider">
  <ul class="myNewsList">
    <li>first element</li>
    <li>second element</li>
    <li>third element</li>
  </ul>
</div>

I want the list to move from bottom to top and show each element for 5 seconds.

The first element will show for 5 seconds, then disappear, and the second element will show for 5 seconds, etc.

How do I use Jquery to complete this task?

Answer 1

Working demo much simpler : http://jsfiddle.net/aLprr/

APIs used:

• .promise - http://api.jquery.com/promise/
• .delay - http://api.jquery.com/delay/
• .fadeOut - http://api.jquery.com/?ns0=1&s=.fadeOut&go=

Hope it fits the cause :)

P.S. - play around with the 5000 calculation.

Code

$("document").ready(function() {
    $('ul li').each(function(index) {
        $(this).delay(4000 * index).fadeOut(500).promise(function() {
            $(this).remove();
        });
    });


});​