Javascript setTimeout 和 .animate 冲突答案

【问题标题】：Javascript setTimeout and .animate ConflictJavascript setTimeout 和 .animate 冲突
【发布时间】：2014-08-15 05:26:02
【问题描述】：

我正在尝试使页面滚动到底部的图像，并在滚动到底部的过程中淡入一些文本。我不想在向下滚动之前或在向下滚动之后淡入文本（这是当前代码的结果）。我想要一个 .animate 事件中间的定时事件。

使用引导程序加载的 HTML

<div id="scrollFixedFall">
    <center>
    <br><br>
    <font size="200px" color="white" id="text1">A web design demonstration</font>
    </center>
    </div>

    <div id="blueSky">
    </div>
    <img src="https://www.google.com/images/srpr/logo11w.png" class="img-responsive" alt="Responsive image">

带有 jquery 的 JavaScript

$(document).ready(function() {

        $("body").fadeIn(1000);

        setTimeout(function(){
            $("#text1").fadeIn(2000);
        },1000);

        $("html, body, #text1").animate({ scrollTop

这是小提琴。

http://jsfiddle.net/pm27go6s/3/

【问题讨论】：

标签： javascript jquery html scroll timeout

【解决方案1】：

您将 2 个动画附加到 1 个元素，而一个元素在其他元素完成之前无法执行，您应该从 $("html, body").animate({ scrollTop: $(document).height() }, 4000); 中删除 #text1，希望这对您有用

http://jsfiddle.net/pm27go6s/4/

【讨论】：

【解决方案2】：

谢谢monkeyinsight，但我找到了一个不同的解决方案，可以帮助其他找到这个问题的人。我决定用 delay() 切换 setTimeout()。它给了我更少的麻烦和更多的控制，我可以在多个动画中拥有一个元素。

我从

    setTimeout(function(){
        $("#text1").fadeIn(2000);
    },1000);

到

    $("#text1").delay( 1000 ).fadeIn(2000);

这是小提琴

http://jsfiddle.net/pm27go6s/5/

【讨论】：