動畫jQuery中

Question

長序列我不得不做出的長篇動畫以jQuery的，充滿fadeOuts的，fadeIns，slideIns，...

我遇到的問題是，我的代碼看起來醜陋，它是充滿回調。
另外，如果我想停止一段時間的動畫，如：slideOut->wait 5 seconds->slideIn我必須使用延遲，我不確定這是否是最佳做法。

例：

/* Slides */ 
var slide1 = $('div#slide1'), 
    slide2 = $('div#slide2'), 
    slide3 = $('div#slide3'); 

$(document).ready(function(){ 
    slide1.fadeIn(function(){ 
     slide2.fadeIn(function(){ 
      slide3.fadeIn().delay(3000).fadeOut(function(){ 
       slide2.fadeOut(function(){ 
        slide1.fadeOut(); 
       }); 
      }); 
     }); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/ZPvrD/6/

問題：是否有建立動畫在jQuery的，甚至可能是一些偉大的插件的任何其他方式來幫助我解決這個問題？

謝謝！

Answer 1

這裏就是你要找的插件:)是否完全一樣的事情，但比你現有的代碼http://jsfiddle.net/ZPvrD/11/

(function($){ 
    $.fn.fadeInOut = function(middleDelay) { 
     middleDelay = middleDelay || 0; 
     var index = 0, 
      direction = 1, // 1: fading in; -1: fading out   
      me = this, 
      size = me.size(); 
     function nextAnimation() { 
      // Before the first element, we're done 
      if (index === -1) { return; } 

      var currentEl = $(me.get(index)), 
       goingForward = direction === 1, 
       isLastElement = index === (size - 1); 

      // Change direction for the next animation, don't update index 
      // since next frame will fade the same element out 
      if (isLastElement && goingForward) { 
       direction = -1; 
      } else { 
       index += direction; 
      } 

      // At the last element, before starting to fade out, add a delay 
      if (isLastElement && !goingForward) { 
       currentEl.delay(middleDelay); 
      } 
      if (goingForward) { 
       currentEl.fadeIn(nextAnimation); 
      } else { 
       currentEl.fadeOut(nextAnimation);      
      } 
     } 
     nextAnimation(); 
     return this; 
    }   
})(jQuery); 

更加靈活，你怎麼稱呼它像

$('div.slideWrapper>div.slide').fadeInOut(3000); 

可以將等待每個動畫完成的jQuery元素列表上下遍歷的過程抽象出來，以便除之外的其他內容和fadeOut。如果你覺得冒險，我會讓你試試看。

Answer 2

試試這個：

/* Slides */ 
var slide = $('div[id*="slide"]'); 

$(function(){ 

     slide.each(function(k){ 

      $(this).delay(500 * k).fadeIn(); 
     }); 
    }); 

Answer 3

JQuery的動畫需要兩個參數（最大），持續時間和完整的，持續時間是多久你想你的動畫來完成，也可以使用以毫秒爲單位的時間「慢」或「快」，第二個參數完成，這是回調函數。

如果不想使用延遲，可能會使以前的動畫變慢。

例如

slide1.fadeIn(5000, function(){ 
    slide2.fadeIn(); 
};