不同元素的 jQuery 排队动画问题

Question

大家好，我在链接动画时遇到问题，我的情况是：

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”就会正确执行；在动画结束时，如果我再次单击“单击”，“动画二”将正确执行；如果我在动画一正在进行时（或动画二正在进行时）单击“单击”，一切都会变得混乱......我想要的行为是，如果我在动画正在播放时单击“单击”继续，动画继续播放直到结束，之后，另一个动画开始播放，如果我再次单击相同的行为，依此类推...基本上我想要一个队列：动画一，动画二，动画一个等等...取决于我的点击。

我尝试使用应用于 $container 的 .queue() 和 .dequeue() 方法，但没有成功；我无法判断点击时我的应用程序应该将动画放入队列中而不是执行它...

请帮助我，我快疯了：D

Answer 1

我看到您采取了在 .queue() 的方法>$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() 将队列推进到它的位置。下一步。