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元素列表的过程可以被抽象出来，这样它就可以用于除fadeIn和fadeOut之外的其他东西。如果你有冒险的话，我会留给你试试。

Answer 2

试试这个：

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

 $( function(){

      slide.each( function( k ){

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

Answer 3

JQuery动画有两个参数（最大值），持续时间和完整，持续时间是你希望动画完成多长时间的时间（以毫秒为单位），或者你可以使用“慢”或“快”，第二个参数完成哪个是回调函数。

如果不想使用延迟，则可能会使上一个动画变慢。

e.g。

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

在jQuery中动画长序列

3 个答案: