jQuery隊列 - 同一對象上的兩個獨立動畫

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(); 
     }); 
    });