jQuery一次仅追加一次当前多次

问题描述

| 我有一个附加问题。我使用的是\“ mouseenter \”和\“ mouseleave \”而不是悬停鼠标，这样追加操作不会发生一百万次，但是我仍然遇到人们在div上进入和离开鼠标多次的问题。 要查看此问题，请转到http://mercury-consulting.theportlandco.com/，然后将鼠标悬停在“基于云”上的横幅广告放置在页面下方约20％的位置。如果然后移开鼠标，然后连续几次移回，则附加操作会多次发生，从而创建图层和图层。 这是我的代码的示例：

$(\"#cloud1\").live(\"mouseenter\",function() {
$(this).append(\'<div class=\"cloud1\" style=\"display:none\"><img src=\"http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png\" width=\"470\" height=\"270\"/></div>\')
.find(\'div.cloud1\').show(\"slide\",{ direction: \"down\" },1100); 
});

$(\"#cloud1\").live(\"mouseleave\",function() {
$(\".cloud1\").hide(\"slide\",1100,function() {
    $(this).remove();
});
});

解决方法

尝试在

.show()

和

.hide()

之前添加

.stop()

，它将停止动画,在要动画的对象上使用ѭ4来取消先前的动画。 编辑：实际看您的代码，您可以做一些允许以下操作：

$(\'#cloud1,#cloud2,#cloud3\').hover(function() {
    var id =  $(this).attr(\'id\');

    // If a div isn\'t already available/animating,then create it
    if (!$(\'div.\' + id).length)
    {
        // Create and show the div
    }
  },function() {
    // slide the div down
  }
);

,您可能有一个标志并验证它是否已关闭，如果是，则附加该图层并打开该标志；否则，请勿附加图层。,您的代码仍然有问题。查看在您的站点中实施

stop()

后我所截取的屏幕截图： 通过在演示动画结束之前将鼠标悬停在激活div（例如“基于云”上）上来回移动鼠标，从而重现该错误，然后将鼠标停在“基于云”上。 可以使用ѭ8there语法将其他人所说的内容（验证那里是否已存在

.cloud1

层）集成到您的解决方案中（文档在此处）：

$(\"#cloud1\").bind(\"mouseenter\",function() {
    $(\"#cloud1\").append(function(idx,html) {
        if ($(html).find(\'.cloud1\').size() == 0) {
            return \'<div class=\"cloud1\" style=\"display:none\"><img src=\"http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png\" width=\"470\" height=\"270\"/></div>\'; 
        }
    }).find(\'.cloud1\').stop().show(\"slide\",{ direction: \"down\" },1100);
});

最后，我使用

bind

代替

live

，因为： 此方法（live（））是基本.bind（）方法的变体，用于将事件处理程序附加到元素。调用.bind（）时，jQuery对象引用的元素将附加到处理程序；稍后引入的元素不需要，因此它们将需要另一个.bind（）调用。 由于您只有一个＃cloud1，以后没有介绍其他任何一个，因此不需要live（）。