JQuery動畫ul列表

<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秒。JQuery動畫ul列表

的第一個元素將顯示5秒，然後消失，第二個元素將顯示5秒等

如何使用jQuery來完成這個任務？

來源

2012-10-14 user1645112

問：如何使用jQuery動畫功能來完成這個任務???? |答：先學習如何使用jQuery。 – Nw167

一個簡單的方法來做到這一點。將

1]設置myNewsList的li的margin-top財產100%;

2]通過使告訴jQuery來animate myNewsList的li其margin-top到0%

3]爲5 seconds延遲，您可以使用setInterval()方法，你可以每5秒鐘，然後後隱藏myNewsList的第一立通過設置它的top-margin至0％。如果所有李時珍隱藏動畫第二li，再次從第一li開始..

來源

2012-10-14 05:47:06 Anirudha

工作演示簡單得多：使用210層

的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(); 
     }); 
    }); 


});

來源

2012-10-14 06:30:07

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

來源

2012-10-14 07:35:01 Afshin

JQuery動畫ul列表

回答

相關問題