Question

在阅读和测试后，它不起作用，动画一个元素，而另一个元素动画：

        var wWidth = $(window).innerWidth(),
        count = $('.slide').length;

        $('body *').css('width',wWidth);
        $('.slide div').each(function(ind,el) {
            $(el).css({
                'left': (wWidth*(ind+1))
            });
        });


        function startAnimation() {
            $(".slide div.image2" ).animate({
                left: wWidth/4,
                opacity:1
            }, {
                duration: 1800,
                step: function( now, fx ){
                    $( ".slide div.image1" ).animate( {left:0,opacity:1 },1800);
                }
            });

        };
        function finishAnimation() {
            $(".slide div.image2" ).animate({left: -wWidth,opacity:0}, {
              duration: 1000,
              step: function(now, fx) {
                if (fx.state > 0.5 && fx.prop === "width") {
                   if(!$( ".slide div.image1" ).is(':animated')) // Make sure you didn't start the animation already
                     $( ".slide div.image1" ).animate({left:-wWidth,opacity:0}, 1000);
                }
              }
            })
        }
        startAnimation();
        finishAnimation();

startAnimation工作正常，但finishAnimation不会隐藏并向左移动.image1 div

请帮忙

Answer 1

如果我错了，请纠正我，但我发现你试图在image1 step内启动动画的唯一原因是因为你希望它在image2时启动动画已经完成了一半。由于您已定义动画持续时间，因此可以使用简单的$.delay：

来实现

function startAnimation() {
    $(".slide div.image2")
        .animate({left: wWidth / 4, opacity: 1}, 1800)
        .animate({left: -wWidth, opacity: 0}, 1000);
    $(".slide div.image1")
        .animate({left: 0,opacity: 1}, 1800)
        .delay(500)
        .animate({left: -wWidth, opacity: 0}, 1000);
}

http://jsfiddle.net/xtGyt/2/

Answer 2

而不是打电话：

 startAnimation();
 finishAnimation();

使用complete将finishAnimation置于startAnimation的回调函数中，然后只需致电startAnimation()：

DEMO

var wWidth = $(window).innerWidth(),
count = $('.slide').length;

$('body *').css('width',wWidth);
$('.slide div').each(function(ind,el) {
    $(el).css({
     'left': (wWidth*(ind+1))
     });
});

function startAnimation() {
        $(".slide div.image2" ).animate({
        left: wWidth/4,
        opacity:1
    }, {
        duration: 1800,
        step: function( now, fx ){
            $( ".slide div.image1" ).animate( {left:0,opacity:1 },1800);
        },
         complete: finishAnimation()
        });

    };
    function finishAnimation() {
        $(".slide div.image2" ).animate({left: -wWidth,opacity:0}, {
                 duration: 1000,
                 step: function(now, fx) {
            if (fx.state > 0.5 && fx.prop === "width") {
                 if(!$( ".slide div.image1" ).is(':animated')) // Make sure you didn't start the animation already
                      $( ".slide div.image1" ).animate({left:-wWidth,opacity:0}, 1000);
                 }
              }
              });
     }
     startAnimation();

动画中的动画不起作用

2 个答案: