javascript - 单击新元素时停止淡入淡出动画

Question

我有一个动画，在单击链接时会导致框按顺序出现。我发现单击新链接时动画不会停止，并且通常会导致它出现乱序。在客人之间快速点击时，您可以在此处看到这一点。我认为类似的东西$.animation.stop()可以解决这个问题，但它没有。任何帮助，将不胜感激。

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

Answer 1

您是否尝试过设置to的queue选项？ 这样，动画就不会排队并且会立即开始：.animate()false

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

...或者你可以在打电话.stop()之前打电话.animate()：

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