jQuery - 无法停止动画和淡出/淡入功能

Question

我已经阅读了很多主题和 jQuery 文档，但我仍然无法解决这个问题。

我拥有的是不透明度为 0 和一些背景颜色的 div。在某个按钮的用户“单击”事件中，我调用“StartAnimationFuncton”函数，该函数使 div 的不透明度为 1 并添加加载图像。

然后当从服务器接收到信息时，我调用“StopAnimationFuncton”函数，该函数应该删除正在加载的div，然后再次使背景div的不透明度为0。

注意：我将延迟（1000）设置为加载之前删除它，因为如果请求完成得太快，加载会显示一毫秒并且看起来很丑。

//StartAnimationFuncton
$("#BackGroundDiv").stop('fx',true,false).animate({opacity:1.0},1000,function(){
    $('#ShopperPortalLoadingDivContentTable').remove();
    $('<div id="Loading" style="width:100%;height:100%"></div>').hide().appendTo('#BackGroundDiv').stop('fx',true,false).fadeIn(500,function(){
        ...
        //Waiting data from the server - when the date is call the StopAnimationFunction
        ...
    });
});

//StopAnimationFuncton
$('#Loading').stop(true,false).delay(1000).fadeOut(500,function(){
    $(this).remove();
    $("#BackGroundDiv").stop(true,false).animate({opacity:0.0},1000,function(){
        ShopperPortal.Content.Functions.Render.InitializeRenderModeContainerAndLoadingEffects.Parameters.IsStopLoadingEffectActive=false;
    });
});

我的问题是，当用户在按钮上“单击”多次时，当前动画不会停止。我尝试了所有变体 - 对每个元素组合使用 stop()、stop('fx',true,false)、stop(true,true)、stop(true,false)，但没有任何帮助。

停止当前动画并完成功能的正确方法是什么？还。如果我的逻辑不正确，我是否愿意接受新想法？

编辑 1：我使用的是 jQuery 版本 1.8.2

EDID 2：我读到延迟（1000）可能会导致问题，因为它不能被删除/取消。

Jquery .delay().fadeOut cancel/clear queue.. Is it possible? How?

http://forum.jquery.com/topic/stop-does-not-clear-delay

这就是为什么我用动画（{opacity:1.0},1000）替换它但没有任何改变。

Answer 1

如果在同一个元素上调用了多个动画方法，则后面的动画将放置在该元素的效果队列中。

在第一个动画完成之前，这些动画不会开始。
当.stop() 被调用时，队列中的下一个动画立即开始。

如果为clearQueue 参数提供了true 的值，则队列中的其余动画将被删除并且永远不会运行。