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\", { direction: \"down\" }, 1100, function() {
$(this).remove();
});
});
没有找到相关结果
已邀请:
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 } );田眯衅
柑恫祟
后我所截取的屏幕截图： 通过在演示动画结束之前将鼠标悬停在激活div（例如“基于云”上）上来回移动鼠标，从而重现该错误，然后将鼠标停在“基于云”上。 可以使用ѭ8there语法将其他人所说的内容（验证那里是否已存在层）集成到您的解决方案中（文档在此处）：$(\"#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); });代替，因为： 此方法（live（））是基本.bind（）方法的变体，用于将事件处理程序附加到元素。调用.bind（）时，jQuery对象引用的元素将附加到处理程序；稍后引入的元素不需要，因此它们将需要另一个.bind（）调用。 由于您只有一个＃cloud1，以后没有介绍其他任何一个，因此不需要live（）。