jQuery .append一次一次（当前多次出现）

Question

我遇到附加问题。我正在使用“mouseenter”和“mouseleave”而不是onhover，因此追加量不会发生一百万次，但是我仍然遇到人们在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();
});
});

Answer 1

对要动画的对象使用.stop(true, true)取消前一个动画。

---

编辑：实际查看您的代码，您可以执行以下操作：

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

Answer 2

尝试在.stop()和.show()之前添加.hide()它会停止动画

Answer 3

你可以有一个标志并验证它是否已关闭，如果是，则附加图层并打开标志;否则，不要附加图层。

Answer 4

您的代码仍有问题。检查我在您的网站中实施stop()后拍摄的屏幕截图：

通过在显示动画结束之前将> 鼠标悬停在“基于云”之上，重复监控激活div（例如“基于云”）几次重现错误

其他人所说的（验证那里是否已有.cloud1图层）可以使用append(function (idx,html))语法（doc here）集成到您的解决方案中：

$("#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（）。