2

これを機能させるのに問題があります：

$("#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にカーソルを合わせてもフェードインせず、表示されるだけです。何が問題なのかわからない - 教えてください!

4

3 に答える 3

5

あなたの要素はすでに表示されています。この例を試してください

$("#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');
});
于 2011-04-07T10:55:18.520 に答える
4

問題は、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 が追加されるためです。

于 2011-04-07T10:58:26.150 に答える
1 
$("#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 の例

于 2011-04-07T10:55:44.670 に答える