Question

我正在尝试将页面滚动到底部的图像，并且在滚动到底部的路上，淡入一些文本。我不想在向下滚动之前或在向下滚动之后淡化文本（这是当前代码导致的）。我想在.animate事件中间进行定时事件。

使用bootstrap加载的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/

Answer 1

您将2个动画附加到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/

Javascript setTimeout和.animate冲突

2 个答案: