jquery - jQuery - .append() 和 .fadeIn() 不起作用

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 时，它已经变得可见了。所以你必须事先隐藏它。查看我的现场演示。

$("#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，否则每当 mouseenter 事件发生时，都会添加一个新的 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 示例