显示主页之前的jQuery动画答案

【问题标题】：jQuery animate before displaying home page显示主页之前的jQuery动画
【发布时间】：2013-07-11 16:22:06
【问题描述】：

我是 jquery 的新手。我的客户需要一个主页，首先徽标会出现一些动画并暂停几秒钟，然后是公司名称，然后徽标和徽标下方的标题会出现一些动画。我应该如何进行？是 $("#mydiv").show().delay(5000).fadeOut(); 是正确的方法吗？我无法找到实现这一目标的方法。更新：我尝试了以下方法：

<body>
<script>
$("#myElem").show().delay(5000).fadeOut();
</script>
<div id="myElem">
DEMO DIV LINES</div>
</body>

但它根本不是动画，只是显示DEMO DIV LINES!!

【问题讨论】：

我们很乐意帮助您解决现有代码的问题，但此站点并非旨在从头开始请求完整解决方案的地方。通过在网上找到类似的效果，编写代码来复制该效果，并在此处询问您在编写该代码时是否卡住，您可能会获得更好的结果。
感谢您的建议。请看我更新的尝试

标签： jquery jquery-animate

【解决方案1】：

您可能想要使用 oncomplete 函数：

// even though opacity is allready 1 (100% visible) 
//it will take 5000ms to trigger the onComplete function(){}
$("#startpage").animate({opacity:1},5000, function(){
    $(this).fadeOut(400, function(){
        // make code here that will show other page:
       $('#realpage').fadeIn();
    });
});

发了example on JSFiddle

【讨论】：

什么是oncomplete 函数？你是说callback函数吗？
嗯，我认为这个名字说明了一切 :P 一个在完成时执行的函数 :P 可以是现有函数或匿名函数（就像我在示例中使用的那样）。如果你有一个名为 exampleFunction() 的函数，你会做 $(elem).fadeIn(milisec, exampleFunction); *不确定我是否应该将它作为字符串输入 ('exampleFunction')。匿名函数的使用频率更高:)
这通常称为callback 函数。

【解决方案2】：

您可以考虑先隐藏 div。

<div id="myElem" style="display:none">

理想情况下，您当然会创建一个名为 hidden 的 css 类，然后分配该类。

【讨论】：