CODEWITHSUNDEEP
jqueryanimation
gimme5
gimme5

Reputation: 89

make jQuery animation queue unresponsive to clicks

No matter what I do, I can't get this chain of animations to be unaffected by a click whilst it's running. I've tried placing .stop before each .animate (trying different combinations of 'true'/'false' for the Booleans) but that doesn't have the desired effect.

Ideally the animation will be completely unresponsive to clicks until the queue/chain has completed.

$(window).load(function () {
    $(document).ready(function () {
        $('.title-bar, #menu-wrap').click(function () {
            if ($('#menu-wrap').offset().top - $(window).scrollTop() === 0) {
                $('#menu-wrap').animate({top : '-170px'}, 1000);    
                $('.nav').slideToggle(1400);       
                $('.lower').css('background-image', 'none');
            } else {
                $('#menu-wrap').offset().top = 0;     
                $('#menu-wrap').animate({top : '0px'}, 1000); 
                $('.nav').slideToggle(600);
                $('.lower').css({'background-image' : 'url(menu2.png)', 'background-position' : 'bottom center'});
            }
        });
   });
});

Hope you can help

Upvotes: 1

Views: 139

Answers (2)

j08691
j08691

Reputation: 207861

Wrap your code using the $(elem).is(':animated') syntax for checking if an element is being animated. Ex:

if ( !$(this).is(':animated') ) ...

Updated example:

    $('.title-bar, #menu-wrap').click(function () {
        if ( !$(this).is(':animated') ) {
        if ($('#menu-wrap').offset().top - $(window).scrollTop() === 0) {
            $('#menu-wrap').animate({top : '-170px'}, 1000);    
            $('.nav').slideToggle(1400);       
            $('.lower').css('background-image', 'none');
        } else {
            $('#menu-wrap').offset().top = 0;     
            $('#menu-wrap').animate({top : '0px'}, 1000); 
            $('.nav').slideToggle(600);
            $('.lower').css({'background-image' : 'url(menu2.png)', 'background-position' : 'bottom center'});
        }
        }
    });

Upvotes: 2

Dhruvenkumar Shah
Dhruvenkumar Shah

Reputation: 528

there is property called queue which will help you. I think this should help... the way it looks, you should write a callback function which will be called after other function has been complete.

Upvotes: 0

Related Questions