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=

希望它适合原因:)

P.S。 - 玩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;

}

DEMO

Answer 3

执行此操作的简单方法是

1]将myNewsList的li的{{1}}媒体资源设为margin-top;

2]通过将100%设为animate

，将jquery告诉li myNewsList的margin-top

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

JQuery动画ul列表

3 个答案: