jquery - jQuery动画ul列表

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>

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

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

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

Answer 1

工作演示更简单：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=

希望它适合原因:)

PS - 玩弄 5000 的计算。

代码

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


});​

Answer 2

var p;
for(i=0;i<=3;i++){
  p=i*20;
  $('.myNewsList').animate({"margin-top":"-"+p+"px"},1000).delay(5000);
 }​

.myNewsSlider
 {
  width:200px;
  height:24px;
  overflow:hidden;
  position:relative;

}

演示

Answer 3

一个简单的方法是

1]将myNewsList的li属性margin-top设置为100%；

2]通过将jquery告诉animatemyNewsList's tolimargin-top0%

3]对于5 seconds延迟，您可以使用 setInterval()可以在每5秒后隐藏myNewsList的第一个li然后li通过将其设置top-margin为0％来设置第二个动画的方法。如果所有li都被隐藏，请再次从第一个开始li..