3
<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 来完成这个任务?

4

3 回答 3

2

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

使用的 API:

希望它适合原因:)

PS - 玩弄 5000 的计算。

代码

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


});​
于 2012-10-14T06:30:07.100 回答
1
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;

}

演示

于 2012-10-14T07:35:01.637 回答
0

一个简单的方法是

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

于 2012-10-14T05:47:06.747 回答