web-dev-qa-db-ja.com

jQueryを使用して、divをゆっくりフェードアウトし、コンテンツを更新してから、divをゆっくりフェードインする方法は？

divを持っています。フェードアウトし、コンテンツを更新してから、フェードインします。これまでのところ、次のことを試しました。

_$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});
_

フェードアウトが完了し、匿名のコールバックが呼び出されます。ここまでは順調ですね。

divのコンテンツは正しく置き換えられますが、fadeIn()の効果は即座に発生します。スムーズな移行はなく、更新されたdivにすばやくすばやくジャンプします。

これを達成するためのより良い方法はありますか？アドバイスありがとうございます。

jqueryhtmlcallbackfadeinfadeout
15
Alex Reynolds

あなたはそれをこのようにすべきです（これは動作し、テストされたコード）：

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').html(content);
    $('#myDivID').fadeIn('slow');
});

新しく作成されたdivがすぐに表示されるため、コードが機能していませんでした。別の解決策は、次のようなdisplay:noneを追加することです。

   $('#myDivID').fadeOut('slow', function() {
      $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
      $('#myDivID').fadeIn('slow');
  });

これが乾杯に役立つことを願っています

25
Edgar Villegas Alvarado

setTimeOutを使用する

setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);

これは動作します

jsFiddle http://jsfiddle.net/3XYE6/1/

$('#doit').click(function(){
    $('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html('New content in MyDiv ('+Math.random()+')')
        setTimeout(function() { $('#myDivID').fadeIn('slow'); }, 5000);
    });    
})
5
kobe

これでうまくいくはずです！

http://jsfiddle.net/3XYE6/

2
netbrain

このようなものが機能します：

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID'>" + content + "</div>")
    $('#myDivID').hide().delay(2000).fadeIn('slow'); 
});

ここでテスト： http://jsfiddle.net/tomgrohl/PgcTZ/

アニメーションを機能させるために、遅延の前に非表示を配置しました。

1
Tomgrohl

ReplaceWithを使用すると、コンテンツが表示されるため、スムーズな移行ができません。

最初にdivを非表示にしてから、fadeInを呼び出すと、スムーズに移行できます。

$('#myDivID').fadeOut('slow', function() {
    $('#myDivID').replaceWith("<div id='myDivID' style='display:none'>" + content + "</div>");
    $('#myDivID').fadeIn('slow');
});
1
suren

これを試して。

http://jsfiddle.net/X3cnT/

$('#myDivID').fadeOut('slow', function() {
        $('#myDivID').html("all this text");
        $('#myDivID').fadeIn('slow');
});
1
calumbrodie