Javascript 在jQuery中设置长序列动画

我必须用jQuery制作一个很长的动画，充满了淡出、淡出、幻灯片

我遇到的问题是，我的代码看起来很难看，而且充满了回调
另外，如果我想停止动画一段时间，比如：

slideOut->wait 5s->slideIn

我必须使用delay，我不确定这是否是最佳做法

示例：

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

问题：有没有其他方法在jQuery中构建动画，甚至可能是一些很棒的插件来帮助我解决这个问题

谢谢

试试这个：

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

 $( function(){

      slide.each( function( k ){

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

---

JQuery动画有两个参数（最大值），duration和complete，duration是希望动画完成的时间（以毫秒为单位），也可以使用“slow”或“fast”，第二个参数complete是回调函数

如果不想使用延迟，可以使上一个动画变慢

e、 g

---

下面是您正在寻找的插件：）做了完全相同的事情，但比您现有的代码灵活得多

你把它叫做

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

---

这个上下遍历等待每个动画完成的jQuery元素列表的过程可以被抽象，以便它可以用于除

fadeIn

和

fadeOut

之外的其他事情。如果你喜欢冒险，我会让你试试。

这和延迟不同。这只会在5秒钟内“拉伸”动画。这是真的，如果你不想使用延迟，这就是我的意思！即使我不想使用延迟，这仍然是不一样的。延迟和持续时间是两个不同的东西。Delay在一段时间内停止函数的执行，其中duration time参数只是在一段时间内拉伸动画。如果我使用了你的代码，淡入淡出后的下一个函数仍然会立即运行：）hm。。那淡出呢：假设你知道默认的动画延迟，那么这就是欺骗。您可以使用相同的假设并向后添加不同的循环调用

fadeOut

。我建议尝试队列方法：

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