Question

我在完成这项工作时遇到了一些麻烦：

$("#cloud1").live("mouseenter", function() {
$(this).append('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>');
$(this).fadeIn('slow');
});

当我将鼠标悬停在div上时它不会消失，它就会出现。不确定是什么问题 - 请告诉我！

Answer 1

您的元素已经可见。试试这个例子

$("#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="400"/></div>')
    .find('div.cloud1').fadeIn('slow');
});

Answer 2

问题是，当你追加一个div时，它已经变得可见了。所以你必须事先隐藏它。看看我的Live Demo。

$("#cloud1").live("mouseenter", function() {
  $('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>')
    .hide()
    .appendTo(this)
    .fadeIn('slow');
});

另一种解决方案可能是将其添加到样式表中：

.cloud1 { display: none; }

因此，只要附加了cloud1类的内容，默认情况下就会隐藏它，因此fadeIn()将按预期工作。

附录：您可能还想检查是否已添加div，因为每当鼠标中心事件发生时，都会附加新的div。

Answer 3

$("#cloud1").live("mouseenter", function() {
    var div = $('<div class="cloud1"><img src="http://mercury-consulting.theportlandco.com/wp-content/uploads/2010/10/1.png" width="470" height="400"/></div>').hide(); 
    $(this).append(div);
    div.fadeIn('slow');
});

JSFiddle Example

jQuery - .append（）与.fadeIn（）不起作用

3 个答案: