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