在jquery設置一個延遲淡出或淡出點擊

Question

我想正確的通知彈出的腳本。我不希望彈出窗口在X秒後淡出，或者當用戶單擊消息時淡出。我可以同時獲得兩種效果，但當我嘗試將它們合併時，fadeOut可以工作。這是到目前爲止我的代碼：

function notify(data, type) { 
switch(type) { 
case "success": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifySuccess') 
    .click(function() { 
$("#notify").fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
case "error": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifyFailure') 
    .click(function() { 
$("#notify").fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
} 
} 

Answer 1

你需要有一個.stop()清除延遲從隊列中，像這樣：

function notify(data, type) { 
switch(type) { 
case "success": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifySuccess') 
    .click(function() { 
    $("#notify").stop(true, true).fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
case "error": 
    $('#notify').html(data) 
    .removeAttr("style") 
    .addClass('notifyFailure') 
    .click(function() { 
    $("#notify").stop(true, true).fadeOut(); 
    }) 
    .delay(5000).fadeOut(); 
break; 
} 
} 

另外，如果你只對類型success和error ，您可以將此縮減很多，如下所示：

function notify(data, type) { 
$('#notify').html(data) 
    .removeAttr("style") 
    .addClass(type == 'success' ? 'notifySuccess' : 'notifyFailure') 
    .delay(5000).fadeOut() 
    .click(function() { 
    $(this).stop(true, true).fadeOut(); 
    }); 
} 

Answer 2

嘗試放置.stop（）;

.click(function() { 
    $("#notify").stop(true,true).fadeOut(); // also in this part, you may change $("#notify") to $(this) 
})