0

以下にいくつかのjQueryがありますが、これは正しく機能していません。ボタンをクリックすると、次のことが必要になります。

  • ローディングgifが5秒間表示される
  • これがフェードアウトしたら、ありがとうの div を 5 秒間表示する必要があります。
  • 次に、これが終了したら、現在の div を非表示にしてから、最初の div (page1) を表示する必要があります

ただし、ロード中の gif div と thank you div が同時に表示され、ページ 1 と 2 の非表示/表示は上記に乗ります。

これが私のコードです：

 $('a.myLink').click(function(e){ 
                // show loading gif for 5 seconds then fade out
                $(".myGif").show().delay(5000).fadeOut();

                //once loading gif has finished then show thank you message for 5 seconds then fade out
                $(".thanksAgain").show().delay(5000).fadeOut();

                // once thank you message has finished go back to main screen
                $('.page2').hide();
                $('.page1').show();
            });

すべてが正しい順序で機能するようにするにはどうすればよいですか?

4

2 に答える 2

3

fadeout();タイミングを合わせようとする代わりに、関数でコールバック関数を使用できます。関数の実行が完了すると、コールバックが発生します。

次のようになります。

$(".myGif").show().delay(5000).fadeOut(400, function() {
    $(".thanksAgain").show().delay(5000).fadeOut();
});

これにより、 divの機能が完了した.thanksAgain後にのみ、div が表示されます。.myGiffadeOut()

関数のfadeout();場合、コールバックは 2 番目のパラメーターです。これは、jQuery のドキュメント ( http://api.jquery.com/fadeOut/ ) を参照して確認できます。

于 2013-02-04T15:11:26.583 に答える
1 
$('a.myLink').click(function(e){ 
                // show loading gif for 5 seconds then fade out
                $(".myGif").show().delay(5000).fadeOut(400,function(){
                       $(".thanksAgain").show().delay(5000).fadeOut(400,function(){

                                $('.page2').hide();
                                $('.page1').show();
                       });

                });


});
于 2013-02-04T15:11:50.220 に答える