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

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

Answer 3

的問題是，當你添加一個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將被追加。