0

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

        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

请帮忙

4

2 回答 2

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/

于 2013-09-17T09:33:49.407 回答
0

而不是调用：

 startAnimation();
 finishAnimation();

通过 using放入finishAnimation的startAnimation回调函数complete，然后简单地调用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();
于 2013-09-17T02:25:50.203 回答