jquery - jQuery隐藏和显示具有多个设置延迟的div，代码不起作用

Question

我下面有一些 jQuery 不能正常工作。当我单击按钮时，我需要发生以下情况：

• 加载 gif 显示 5 秒
• 一旦这淡出，我需要一个感谢 div 出现 5 秒钟。
• 然后一旦完成，我就需要隐藏当前的 div，然后显示第一个 div (page1)

然而，加载 gif div 和感谢 div 同时显示，并且隐藏/显示 page1 和 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();
            });

我将如何做到这一点，以便一切都按正确的顺序工作？

Answer 1

您可以在函数上使用回调函数fadeout();，而不是尝试匹配时间。函数运行完成后会发生回调。

它看起来像这样：

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

这将允许.thanksAgaindiv 显示，只有在.myGif它的fadeOut()功能完成后。

对于fadeout();函数，回调是第二个参数。您可以通过查看 jQuery 文档来验证这一点：http: //api.jquery.com/fadeOut/

Answer 2

$('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();
                       });

                });


});