web-dev-qa-db-ja.com

jQueryがフェードアウトしてからフェードインする

このトピックにはたくさんありますが、私の状況によく当てはまるインスタンスは見つかりませんでした。

画像をフェードアウトしてから、別の画像をフェードインします。代わりに、最初のフェードアウトと、すぐに（アニメーションが終了する前に）次のフェードインという問題に直面しています。

私はこれについて一度読みましたが、トリックが何であったかを正確に思い出せません。

http://jsfiddle.net/danielredwood/gBw9j/

ご協力いただきありがとうございます！

jqueryfadeinfadeout
31
technopeasant

フェードアウトが完了したときに実行されるフェードアウトのコールバックで、もう一方をフェードインします。コードの使用：

$('#two, #three').hide();
$('.slide').click(function(){
    var $this = $(this);
    $this.fadeOut(function(){ $this.next().fadeIn(); });
});

または、チェーンを「一時停止」することもできますが、その長さを指定する必要があります。

$(this).fadeOut().next().delay(500).fadeIn();
76
Mark Kahn

JQuery 1.6以降では、promiseを使用する方が適切なオプションのようです。

var $div1 = $('#div1');
var fadeOutDone = $div1.fadeOut().promise();
// do your logic here, e.g.fetch your 2nd image url
$.get('secondimageinfo.json').done(function(data){
  fadeoOutDone.then(function(){
    $div1.html('<img src="' + data.secondImgUrl + '" alt="'data.secondImgAlt'">');
    $div1.fadeIn();
  });
});
4
rabbit.aaron

これは役立つかもしれません： http://jsfiddle.net/danielredwood/gBw9j/
基本的に$(this).fadeOut().next().fadeIn();は必要なものです

2
user2000962