GwtQuery - 空（）的Widget淡出（）後

Question

從我無奈的在包裹引導警報/通知庫GWT我決定使用GwtQuery做出一個：

public static void showErrorNotification(String message){ 
    List<Widget> allNotifications = $(".notification").widgets(); 
    for (Widget w : allNotifications){ 
     $(w).fadeIn(1000); 
     $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" + 
       "<img alt=\"\" src=\"public/images/exclamation.png\"> " + 
       "You must accept the terms and conditions to finish your registration." + 
       "</div>"); 
     $(w).fadeOut(5000); 
     //$(w).empty(); 
    } 
} 

這段代碼的問題是， ，這種方法可能會被用戶多次調用，因此隨着時間的推移HTML會累積起來。像在註釋行中那樣空虛導致通知甚至不顯示。

什麼是解決方案，以便在淡出後它將清空通知面板？

更新：

當我把：

$(w).empty(）之前fadeIn()沒有顯示這種方法被稱爲第二次。

Answer 1

當所有動畫完成時，您必須排隊函數以刪除errorAlert。

您應該在每次調用showErrorNotification方法時停止隊列，以避免在完成之前多次調用該方法時出現問題。

而您必須在添加之前刪除errorAlert以避免在上次通知被移除之前停止重複。

$(w).stop(true, true); 
    $(w).find(".errorAlert").remove(); 
    $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" + 
     "<img alt=\"\" src=\"public/images/exclamation.png\"> " + 
     "You must accept the terms and conditions to finish your registration." + 
     "</div>"); 
    $(w).fadeIn(1000); 
    $(w).fadeOut(5000); 
    $(w).queue(new Function(){ 
     public void f() { 
     $(this).find(".errorAlert").remove(); 
     } 
    });