Javascript setTimeout and .animate Conflict

Question

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

HTML加载bootstrap

<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">

Javascript with jquery

$(document).ready(function() {
        $("body").fadeIn(1000);
        setTimeout(function(){
            $("#text1").fadeIn(2000);
        },1000);
        $("html, body, #text1").animate({ scrollTop

小提琴来了。

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

Answer 1

你给一个元素附加了两个动画，其中一个不能执行，直到另一个完成，你应该从$("html, body").animate({ scrollTop: $(document).height() }, 4000);中删除#text1，希望这将为你工作

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

Answer 2

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

我从

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

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

小提琴来了

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