<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>

我希望列表从下到上移动并显示每个元素 5 秒钟。

第一个元素将显示 5 秒,然后消失,第二个元素将显示 5 秒,以此类推。

我如何使用 Jquery 来完成这个任务?

最佳答案

工作演示 简单得多:http://jsfiddle.net/aLprr/

使用的 API:

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

  • 希望它符合原因 :)
    附注- 玩 5000 计算。

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

    关于JQuery 动画 ul 列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/12879502/

    10-12 12:54
    查看更多