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

【问题标题】：jQuery - .append() with .fadeIn() not workingjQuery - .append() 和 .fadeIn() 不起作用
【发布时间】：2011-07-31 14:19:34
【问题描述】：

我无法正常工作：

$("#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 上时，它并没有消失，它只是出现了。不确定是什么问题 - 请告诉我！

【问题讨论】：

试试$('.cloud1', this).fadeIn('slow');

标签： jquery animation jquery-events dom-manipulation

【解决方案1】：

问题是，当你附加一个 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，否则每当 mouseenter 事件发生时，都会添加一个新的 div。

【讨论】：

【解决方案2】：

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

【讨论】：

我使用slideDown()而不是fadeIn()，同时我想滚动到页面底部我该怎么做？

【解决方案3】：

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

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

【讨论】：