1

こんにちは皆さん、アニメーションの連鎖に問題があります。私の状況は次のとおりです。

HTML

...
<div id="content" class="home-layout clearfix">
    <section class="home-related">
        ...
    </section>
    <section class="search">
        <div class="left">
            <div class="panel">
                ...
            </div>
        </div>
        <div class="right">
            <a class="someclass" href="#">CLICK</a>
        </div>
    </section>
</div>
...

JS

...
setupPanel : function() {
    var $container = $("#content"),
        $toHide = $("#content section.home-related"),
        $toShow = $("#content div.left"),
        $toShowContent = $('#content div.left div.panel'),
        widthOpen = '602px',
        positionOpen = '-600px',
        widthClose = '30px',
        positionClose = '0',
        durationSlide = 300,
        durationFade = 300;


    if(MyApp.vars.searchAperto == false){
        MyApp.vars.searchAperto = true;
        //ANIMATION ONE
        $toHide.fadeOut(durationFade, function(){
            $toShow.animate({
                width: widthOpen,
                left: positionOpen
                }, durationSlide, function(){
                    $toShowContent.fadeIn(durationFade);
            });
        });
    }else{
        MyApp.vars.searchAperto = false;
        //ANIMATION TWO
        $toShowContent.fadeOut(durationFade, function(){
            $toShow.animate({
                    width: widthClose,
                    left: positionClose
                }, durationSlide, function(){
                    $toHide.fadeIn(durationFade);
            });
        });
    }
},
...

すべてが機能しています。「CLICK」をクリックすると、「ANIMATION ONE」が正しく実行されます。アニメーションの最後に「クリック」をもう一度クリックすると、「アニメーション2」が正しく実行されます。アニメーション 1 の実行中に (またはアニメーション 2 の実行中に) 「クリック」をクリックすると、すべてが台無しになります。行く、アニメーションは彼の終わりまで続き、その後、他のアニメーションが始まり、もう一度クリックすると同じ動作など... 基本的に、アニメーション1、アニメーション2、アニメーションが必要です。 1 つなど...私のクリックに応じて。

$container に適用された .queue() および .dequeue() メソッドを使用しようとしましたが、成功しませんでした。クリックすると、アプリがアニメーションをキューに入れ、実行しないようにする必要があるとは言えません...

助けてください私は頭がおかしくなっています:D

4

1 に答える 1

0

実際にこの問題に対する本当に良い解決策である.queue()onを使用するアプローチをとったようです。うまくいけば、理解$containerに問題があり、このコードがうまくいくでしょう:.queue()

$container.queue(function( next ) {
    // I moved this if to inside of the queue, this way
    // even if you click 3 times, it will hide / show / hide
    if(MyApp.vars.searchAperto == false){
        MyApp.vars.searchAperto = true;
        //ANIMATION ONE
        $toHide.fadeOut(durationFade, function(){
            $toShow.animate({
                width: widthOpen,
                left: positionOpen
                }, durationSlide, function(){
                    // note, the final callback on fadeIn will call the "next"
                    // function in the "queue"
                    $toShowContent.fadeIn(durationFade, next);
                });
            });    
        });
    }else{
        MyApp.vars.searchAperto = false;
        //ANIMATION TWO
        $toShowContent.fadeOut(durationFade, function(){
            $toShow.animate({
                width: widthClose,
                left: positionClose
            }, durationSlide, function(){
                // again call next from callback of last anim in the chain
                $toHide.fadeIn(durationFade, next);
            });
        });
    }
});

jQuery で使用されるデフォルトのキューは自動的に開始されるため、いじる必要はまったくありません.dequeue()。キュー関数の最初の引数はnext、次のキュー関数をデキューする関数になるためnext()、キューを次のステップに進めるために使用できます。

于 2011-07-19T18:39:29.710 に答える