Question

出于对GWT包装Bootstrap警报/通知库的挫折感，我决定使用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之前将其删除，以避免在删除之前停止上次通知的情况下重复此操作。

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

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

1 个答案: