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

我认为你正在寻找类似的东西。

$(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 2

如果你想在某些事情完成后做某事，你需要在设置参数后添加另一个函数（在这种情况下为2000）。

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

Answer 3

OP不要忘记Jquery的delay（）函数，它可以帮助你避免使用setTimeout（）。

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

Answer 4

您可以使用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/

Answer 5

因此，在语法方面，window.load事件设置器的末尾没有分号。你应该添加它。

但是，我只是使用模拟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);    
            });    
        }); 
    });
});

在这里，将会发生的是，每个动画都会在完成后触发下一个动画。

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

5 个答案: