Проблема анимации в очереди 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» во время анимации 1 (или во время анимации 2), все портится… поведение, которое я хотел бы иметь, заключается в том, что, если я нажимаю «CLICK» во время анимации,происходит, анимация продолжает идти до его конца, и после, другая анимация начинает идти, и если я нажимаю снова то же самое поведение и так далее ... в основном я хотел бы иметь очередь: anim one, anim two, animодин и т.д ... в зависимости от моих кликов.

Я пытался использовать методы .queue () и .dequeue (), примененные к $ container, но безуспешно;я не могу сказать, что при нажатии мое приложение должно поместить анимацию в очередь и не выполнять ее ...

, пожалуйста, помогите мне, я схожу с ума: 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(), чтобы переместить очередь на следующий шаг.