请问我做了个淡出淡隐的弹出层 但是发现多点几次这个弹出层就会一直出现在页面上不消失了 怎么办 代码如下

Question

function jsprint(cssname, msg) {
    var str = "<div id=\"msbox\" class=" + cssname + ">"+msg+"</div>";
    $("body").append(str);
    $("#msbox").fadeIn(500).delay(500).fadeOut(500, function () {
        $("#msbox").remove();       
    });
}很奇怪 多点几次这个曾就一直在页面上显示了 也不淡隐也不消失 就是一直在页面上了  最好能给代码

Answer 1

赵亮（碧海情天）：因为点多了的话，就在500MS之前插入了多个DIV，而后面只移除了一个，因为ID是默认作为唯一的对象，找到一个不会再找下一个。所以你应该把  $("#msbox").remove(); 改为  $("."+cssname).remove(); 　　这是一个方法，如果因为具体情况不能用CLASS来REMOVE的话，那就在$("body").append(str);之前加一条语句，先检查一下有没有$("#msbox")这个元素，有就不加，没有再添加，这是一般标准的用法，操作之前先作检测。

Answer 2

function jsprint(cssname, msg) {
    if(!$("#msbox").is(":animated")){   //判断动画是否已经结束
      var str = "<div id=\"msbox\" class=" + cssname + ">"+msg+"</div>";
      $("body").append(str);
      $("#msbox").fadeIn(500).delay(500).fadeOut(500, function () {
        $("#msbox").remove();
      });
    }因为你的动画有时延造成了队列，每次点击时判断那个元素是否还在执行动画，如果是就什么都不操作

Answer 3

在$("body").append(str);之前加一条语句，先检查一下有没有$("#msbox")这个元素，有 就退出函数。

Answer 4

function jsprint(cssname, msg) {
    !$('#msbox')[0]?$("body").append("<div id=\"msbox\" class=" + cssname + ">"+msg+"</div>"):$('#msbox').addClass(cssname).html(msg);
    $("#msbox").fadeIn(500).delay(500).fadeOut(500, function () {
        $("#msbox").remove();       
    });
}

Answer 5

function jsprint(cssname, msg) {
    !$('#msbox')[0]?$("body").append("<div id=\"msbox\" class=" + cssname + ">"+msg+"</div>"):$('#msbox').addClass(cssname).html(msg);
    $("#msbox").fadeIn(500).delay(500).fadeOut(500, function () {
        $("#msbox").remove();       
    });
}