jQuery Queue - 同一对象上的两个单独的动画

Question

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

通知（带有默认选项）将等待（延迟）6 秒，然后淡出超过 1 秒。

但是！手动单击它会使其立即淡出 0.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();
        });
    });