Halting fade animation when clicking a new element

Question

I have an animation that causes boxes to appear in sequence when clicking a link. I'm finding that the animation does not stop when clicking a new link and will often cause the it to appear out of sequence. You can see this here when clicking between guests rapidly. I thought something like $.animation.stop() would solve the issue but it hasn't. Any help would be appreciated.

            var stepFade = function() {
                if ($($this).data("known1") === undefined || null) {
                    $('.guest-data .known-for').css('display', 'none');
                } else {
                    $('.guest-data .known-for').css('display', 'block');
                    $('.guest-data .known-for li').eq(0).delay(200).fadeIn( 300);
                    $('.guest-data .known-for li').eq(1).delay(300).fadeIn( 300);
                    $('.guest-data .known-for li').eq(2).delay(400).fadeIn( 300, function() { animating = false; });
                }
            }

            //Fade guest
            if (!featured) {
                featured = true;
                getData();
                $('.featured').fadeOut( 500, function () {
                    $('.selected').animate({ opacity: 'toggle'}, 500, function() {
                        stepFade();                     
                    });
                })
            } else {
                $('.selected, .guest-data .known-for, .guest-data .known-for li').fadeOut( 500, function () {
                    getData();
                    $('.selected').fadeIn( 500, function() {
                        stepFade();
                    });
                });
            }

`$.fn.stop` should work. Can you show us the code with your try to stop the animation? — Bergi, Jan 28 '13 at 22:46
Unfortunately, I don't have a good example. Everything I tried either broke the animation or simply didn't work. — Zach Shallbetter, Jan 28 '13 at 22:53
You call .stop() on an element like `$(".selected").stop(true)` with the true saying to finish the animation immediately. But this just stops the current animation. Another animation on the same element will start up at that time. — Lee Meador, Jan 28 '13 at 23:02
When I place that immediately after the click the fade() runs the first time and then never again. — Zach Shallbetter, Jan 28 '13 at 23:11

score 1 · Accepted Answer · answered Jan 29 '13 at 02:55

Have you tried setting the queue option of .animate() to false?
This way, the animation won't be queued and will begin immediately:

$('.selected')
    .animate({opacity: 'toggle'}, 
             {duration: 500, queue: false,  
                complete: function() { stepFade(); }
             });

...OR you could call .stop() right before you call .animate():

$('.selected')
    .stop(true, false) //clear the queue and don't jump to the end
    .animate({opacity: 'toggle'}, 500, function() {
                        stepFade();
                    });

Halting fade animation when clicking a new element

1 Answers1