Javascript 如何设置时间，以每个内容应显示后，网站已经加载？

我正在寻找一些插件（js/ajax）或教程，它们可以让我设置在站点加载后显示的每个内容的时间

例如： 我希望我的网站有一个加载器，然后显示菜单导航（例如，从右向左滑动的效果），在标识之后，在主页的主图像之后，等等）

这个网站是我想要的一个很好的参考：

你知道这样的事情吗？

尝试使用设置超时

 setTimeout(function(){
        /* Your Function */
    },2000);

---

我将决定运行哪个动画委托给一个函数

doAnimation

，该函数维护上次运行的动画的计数器

我们不需要在这里使用setTimeout，因为我们只依赖jQuery动画回调来确保一个动画在另一个动画完成时发生

此处的工作示例（已更新）：

HTML

jQuery/Javascript

(function ($) {
    var currentCall = 0,
        animations = [{
            element: "#element1",
            type: "slide",
            options: {},
            time: 1000
        }, {
            element: "#element2",
            type: "blind",
            options: {}
        }, {
            element: "#element3",
        }, {
            element: "#element4",
            type: "size",
            time: 300
        }, {
            element: "#element5",
        }, {
            element: "#element6",
            type: "bounce"
        }],
        defaults = {
            type: "fade",
            time: 300,
            options: {}
        };

    function doAnimation() {
        if (animations[currentCall] != undefined) {
            var anim = animations[currentCall];

            $(anim.element).show(
            anim.type || defaults.type,
            anim.options || defaults.options,
            anim.time || defaults.time,
            doAnimation);
            currentCall++;
        }
    }

    $(document).ready(doAnimation);
})(jQuery);

当然，如果您想要并发动画，这是不好的，但是您在问题中没有说明这一点

---

编辑：我已经用javascript清理并定义了一个动画数组，您可以在其中为每个动画单独设置选项。有关所有动画类型，请参阅jQuery UI文档中的

show

。我还定义了一些默认值，如果您没有为动画指定其中一个选项，将使用这些默认值。

您可以尝试window.onload=function（）{setTimeout（function（）{}，1000）；}；谢谢你，马特！几乎完美！你知道我怎样才能尝试其他动画效果吗？@ico1984为你更新了我的答案@ico1984为您发布了一个新的小提琴链接！

div {
    height:100px;
    width 200px;
    display:none;
}
#element1 {
    background: red;
}
#element2 {
    background: green;
}
#element3 {
    background: blue;
}
#element4 {
    background: magenta;
}
#element5 {
    background: black;
}
#element6 {
    background: yellow;
}

(function ($) {
    var currentCall = 0,
        animations = [{
            element: "#element1",
            type: "slide",
            options: {},
            time: 1000
        }, {
            element: "#element2",
            type: "blind",
            options: {}
        }, {
            element: "#element3",
        }, {
            element: "#element4",
            type: "size",
            time: 300
        }, {
            element: "#element5",
        }, {
            element: "#element6",
            type: "bounce"
        }],
        defaults = {
            type: "fade",
            time: 300,
            options: {}
        };

    function doAnimation() {
        if (animations[currentCall] != undefined) {
            var anim = animations[currentCall];

            $(anim.element).show(
            anim.type || defaults.type,
            anim.options || defaults.options,
            anim.time || defaults.time,
            doAnimation);
            currentCall++;
        }
    }

    $(document).ready(doAnimation);
})(jQuery);