jQuery queuing animation problem with different element

Question

Hi everybody i have a problem with chaining animations my situation is:

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);
            });
        });
    }
},
...

Everything is working. If i click on the "CLICK", "ANIMATION ONE" is executed correctly; at the end of the animation if i click again on the "CLICK" "ANIMATION TWO" is executed correctly; if i click on the "CLICK" while animation one is going (or while animation two is going) everything mess up.... the behavior that i would like to have is that if i click on the "CLICK" while an animation is going, the animation continue to go until his end, and after, the other animation start to go and if i click again the same behavior and so on... basically i would like to have a queue: anim one, anim two, anim one, etc... depending from my clicks.

I tried using the .queue() and .dequeue() methods applied to $container but without success; i cannot tell that on the click my app should put the animation in the queue and not execute it...

please help me i'm getting crazy :D

score 0 · Answer 1 · edited May 23 '17 at 10:34

I see you took an approach of using .queue() on $container which is actually a really good solution to this problem. Hopefully you were just having problems understanding .queue() and this code will work for you:

$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);
            });
        });
    }
});

The default queue used in jQuery will auto-start, so you don't need to mess with .dequeue() at all. The first argument to a queue function is going to be next - a function that will dequeue the next queue function, so you can use next() to advance the queue to its next step.

jQuery queuing animation problem with different element

1 Answers1