0

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

我遇到的问题是我的代码看起来很难看，而且充满了回调。
另外，如果我想停止动画一段时间，例如：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 中构建动画，甚至可能有一些很棒的插件来帮助我解决这个问题？

谢谢！

4

3 回答 3

2

这是您正在寻找的插件:) 做同样的事情，但比您现有的代码更灵活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。如果你喜欢冒险，我会把它留给你试试。

于 2013-04-18T20:03:15.863 回答
0

尝试这个：

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

 $( function(){

      slide.each( function( k ){

            $( this ).delay( 500 * k ).fadeIn();
      });
  });
于 2013-04-18T16:48:44.270 回答
-1

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

如果不想使用延迟，可以让之前的动画变慢。

例如

slide1.fadeIn(5000, function(){
    slide2.fadeIn();
};
于 2013-04-18T16:53:15.913 回答