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

Halting fade animation when clicking a new element

本文关键字：淡入淡出动画新元素元素单击更新时间：2023-09-26

>我有一个动画，当单击链接时，它会导致框按顺序出现。我发现动画在单击新链接时不会停止，并且经常会导致它不按顺序显示。在客人之间快速点击时，您可以在此处看到这一点。我以为像$.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();
                    });
                });
            }

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

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

。或者您可以在呼叫.animate()之前立即致电.stop()：

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