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

を使用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 に答える