jQuery Fade在LI項中，淡出和延遲（）;下一個LI，淡入，淡出

我有一個列表，我希望通過LI顯示下一個li之間的延遲來淡入和淡出每個LI。我覺得我應該能夠遍歷列表，但是沒有讓它循環。有索引的東西？jQuery Fade在LI項中，淡出和延遲（）;下一個LI，淡入，淡出

$('#content li').hide(); 
$('#content li').each(function(n){ 
$(this).delay().fadeIn('li').delay().fadeOut(); 
//how to I start over in the LI again? keep looping? 
}

感謝您的任何想法，想法和/或幫助！我很感激。

來源

2010-10-25 jasonflaherty

jQuery中的每個元素都有自己的動畫隊列。請參閱http://stackoverflow.com/questions/505434/jquery-animation-queues-across-multiple-elements瞭解如何將一組效果綁定在一起。（所以在你的每個函數中，你需要將每個元素添加到alerts數組中。） – 2010-10-25 23:15:18

與您的代碼的一些問題

fadeIn可以作爲參數持續時間，緩解和一個回調函數

所以通過li沒有做任何事情..

您可以使用回調啓動下一個li的動畫。

像這樣

function InOut(elem) 
{ 
elem.delay() 
    .fadeIn() 
    .delay() 
    .fadeOut( 
       function(){ InOut(elem.next()); } 
      ); 
}

，並在第一時間就去做

$('#content li').hide(); 
InOut($('#content li:first'));

演示在http://www.jsfiddle.net/gaby/S5Cjm/

如果您希望循環永遠持續下去，則fadeOut與回調改變

.fadeOut(
      function(){ 
      if(elem.next().length > 0) // if there is a next element 
       {InOut(elem.next());} // use it 
      else 
       {InOut(elem.siblings(':first'));} // if not, then use go back to the first sibling 

      } 
     );

Demo在http://www.jsfiddle.net/gaby/S5Cjm/1/

來源

2010-10-25 23:07:44

謝謝Gaby！ jsfiddle.net是殺手btw ... – jasonflaherty 2010-10-26 15:49:49

這是一些非常漂亮的代碼！謝謝！ – 2014-03-14 09:07:13

jQuery Fade在LI項中，淡出和延遲（）;下一個LI，淡入，淡出

回答

相關問題