jquery - 停止动画*并*阻止完整的动作运行？

Question

我正在淡入淡出背景：

// in:
$bg.css({'pointerEvents':'auto'}).show()
    .stop(true).animate({ 'opacity': 0.90 }, animTime);

// out:
$bg.css({'pointerEvents':'none'}).stop(true)
    .animate({ 'opacity': 0 }, animTime,function () { $bg.hide(); });

当我在它完成淡出之前开始淡入它时，就会出现问题；完整的事件将在淡入动画的一部分中触发并隐藏背景。

我想.stop(true)没有清除完整的事件 - 有什么办法可以做到吗？

Answer 1

找到了解决方法：

$bg.data('fading',true).css({'pointerEvents':'auto'}).stop(true).show().transition({ 'opacity': 0.90 }, animTime, function () { $bg.data('fading', false); });

$bg.css({'pointerEvents':'none'}).stop(true).transition({ 'opacity': 0 }, animTime,function () {
    if(!$bg.data('fading')) {
        $bg.hide();
    }
});

Answer 2

试试.stop(true,true)。这将停止当前事件并删除排队事件。

.stop( [clearQueue] [, jumpToEnd] )
clearQueueA指示是否也删除排队动画的布尔值。默认为假。
jumpToEndA布尔值，指示是否立即完成当前动画。默认为假。