我如何使用jQuery动画图形加载

Question

这是怎么回事?

    $(document).ready(function(){
        $(window).load(function(){$("#welcome").fadeIn(2000); })
        setTimeout(function(){
            $('div#welcome').fadeOut(2000);
        }, 4000);
        setTimeout(function(){
            $('div#content').fadeIn(2000);
        }, 6000);
        setTimeout(function(){
            $('div#menu').fadeIn(2000);
        }, 8000);
    });

似乎有些东西没有像它应该的那样运行，因为所有的函数都将被称为并行。

此外，人们告诉我，我的图形将加载延迟，并将"粘"。

谢谢你的帮助!

Answer 1

因此，在语法方面，在窗口的末尾没有分号。加载事件设置程序。你应该加上这个。

然而，我只是用模拟HTML集运行你的JS，它工作得很好。不知道你在经历什么。所有三个setTimeout调用将同时开始运行。所以…而不是需要18秒跑完，他们都只需要8秒跑完。看来这就是你想要的。

下面是编写代码时最有效的等待方式:

$(document).ready(function(){
    $(window).load(function(){
        $("#welcome").fadeIn(2000).delay(2000).fadeOut(2000,function(){
            $('div#content').fadeIn(2000,function(){
                $('div#menu').fadeIn(2000);    
            });    
        }); 
    });
});

在这里，将发生的是，你的每个动画将触发下一个动画，当他们完成。

Answer 2

我想你正在寻找这样的东西。

$(document).ready(function(){
        $("#welcome").fadeIn(2000, function(){
            setTimeout(function(){
              $('div#welcome').fadeOut(2000, function(){
                 setTimeout(function(){
                     $('div#content').fadeIn(2000, function(){
                       setTimeout(function(){
                         $('div#menu').fadeIn(2000);
                        }, 8000);
                     });
                 }, 6000);
              });
            }, 4000);
        });
    });

Answer 3

如果你想在某事完成后执行某事，你需要在设置参数后添加另一个函数(在本例中为2000)。

我相信你想做这样的事情http://jsfiddle.net/Cp4Dx/

Answer 4

别忘了Jquery的delay()函数，它可以帮助你避免setTimeout()。

$(window).load(function(){$("#welcome").fadeIn(2000).delay(4000).fadeOut(2000)});

Answer 5

您可以使用jQuery队列:

$(document).ready(function() {
    $('#welcome').fadeIn(2000).delay(2000).fadeOut(2000);
    $('#content').delay(4000).fadeIn(2000);
    $('#menu').delay(6000).fadeIn(2000);
});

演示:http://jsfiddle.net/ThiefMaster/9nPAR/