GwtQuery - fadeOut()之后的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();
    }
}

这段代码的问题是，这个方法可能会被用户多次调用，因此append'ed 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();  
      }
    });