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”会正确执行；在动画结束时，如果我再次点击“点击”“动画二”正确执行；如果我在动画 1 进行时（或在动画 2 进行时）单击“CLICK”，一切都搞砸了……我想要的行为是，如果我在动画播放时单击“CLICK”去，动画继续去，直到他结束，之后，另一个动画开始去，如果我再次点击相同的行为等等......基本上我想要一个队列：动画一，动画二，动画一等...取决于我的点击。

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

请帮助我，我快疯了：D

4

1 回答 1

0

我看到你采取了一种使用方法，.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()推进到下一步。

于 2011-07-19T18:39:29.710 回答