javascript - 如何设置网站加载后显示每个内容的时间？

Question

我正在寻找一些插件（js/ajax）或教程，让我设置每个内容的时间应该在网站加载后显示。

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

这个网站是我想要的一个很好的参考：http ://www.smog-bicyclettes.com/

你知道这样的事情吗？

Answer 1

尝试使用设置超时

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

Answer 2

我将决定运行哪个动画委托给单个函数doAnimation，该函数维护最后一个运行动画的计数器。

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

这里的工作示例（更新）：http: //jsfiddle.net/av8ZA/7/

HTML

<div id="element1"></div>
<div id="element2"></div>
<div id="element3"></div>
<div id="element4"></div>
<div id="element5"></div>
<div id="element6"></div>

CSS

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;
}

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。我还定义了一些默认值，如果您不指定动画选项之一，将使用这些默认值。