jQuery队列 - 同一对象上的两个独立动画

Question

我正在制作一个允许网站范围通知的小插件。

通知（使用默认选项）将等待（延迟）6秒，然后逐渐消失1秒钟。

但是！手动点击它会使fadeOut立即停止.5秒。

这是我的问题。

单击通知会使其在淡出前等待6秒延迟。我希望它立竿见影。我意识到这应该用队列完成，但我无法理解它们。这是我到目前为止所做的：

$('#wpnotify')
    .click(function() {
        $(this).fadeOut(this.options.manualFade.dur, function() {
        $(this).remove();
    });
});


if (this.options.autoFade != false)
    $('#wpnotify')
        .delay(this.options.autoFade.delay, 'autoclose')
        .queue('autoclose', function(next) {
            $(this).fadeOut(this.options.autoFade.dur, function() {
                $(this).remove();
                    next();
                });
         }).dequeue('autoclose');

Answer 1

使用.stop(true,true)停止队列并立即结束。

$('#wpnotify')
    .click(function() {
        $(this).stop(true,true).fadeOut(this.options.manualFade.dur, function() {
            $(this).remove();
        });
    });