GwtQuery-fadeOut（）之后的empty（）小部件

Question

出於將Bootstrap警報/通知庫包裝到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();
    }
}

此代碼的問題在於，該方法可能被用戶多次調用，因此append的HTML將隨着時間的推移而累積。 注釋行中的內容為空會導致通知甚至無法顯示。

什么是解決方案，以使其淡出后將清空通知面板？

更新 ：

當我放：

$(w).empty(之前fadeIn()沒有任何顯示在第二次調用此方法。

Answer 1

所有動畫結束后，您必須對函數進行排隊以刪除errorAlert 。

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

而且，您必須在添加errorAlert之前先將其刪除， 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();  
      }
    });