Question

我是一个制作基本网页的初学者，该网页在页面加载时具有从屏幕顶部到中间的文本动画。动画本身效果很好，但是我无法停止循环。动画本身会停止，但我认为该功能会不断循环播放。这样，网页上的其他元素（例如链接等）由于javascript在技术上尚未完成而无法正常运行。我将如何结束该功能？谢谢。

window.onload = Animation;
function Animation() {

//Get Element, Use Position to detemrine text's position.

var Element = document.getElementById("AnimationText");
var Position = -500;

var ID = setInterval(OnFrame, 20);

function OnFrame() {

    if (Position > 50) {

        clearInterval(ID);

    } else {

        if (Position > -100 && Position <= 0)  {

            //Middle of animation, while text is between -100 and 0 position.
            Position = Position + 3;

        } else if (Position > 0) {

            //End of animation until text position is > 50.
            Position = Position + 2;

        } else {

            //Start of animation until text position is at -100.
            Position = Position + 4;

        }

        Element.style.top = Position + 'px';

    }

}

}

HTML：

<!doctype HTML>

<HTML>

<head>

    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">

    <link href = "HomepageStyle.css" rel = "stylesheet" type = "text/css">

    <script src = "HomepageAnimation.js"></script>


</head>


<body>

    <div id = "AnimationText">

            <h1>TNT</h1>

    </div>

    <center>

    <a href = "LogIn.html">

        <img src = "_assets/LoginButtonHome.png" style = "margin-right: 40px; margin-top: 400px;">

    </a>

    </center>

</body>

</HTML>

Answer 1

我在一个测试html文件中尝试了您的代码，并添加了控制台日志，以查看即使在clearInterval之后该函数是否也被调用。没有。您可以自己测试。添加两个console.log语句，一个在if中，另一个在else中。

但是，如果解决了问题，您也可以尝试以下方法：

if (Position > 50) {
    clearInterval(ID);
    console.log("ended"):
    ID = null;
    return;
}

这也是我的测试html元素：

<p id="hello" style="position: absolute;">My first paragraph.</p>

JSFiddle链接：Test here!

您可以通过以下方式在Chrome中查看控制台日志：查看->开发人员-> JavaScript控制台

Answer 2

仅使用JS添加新类，然后让CSS搁置其余部分：

HTML：

<div id = "AnimationText" class="init">
  <h1>TNT</h1>
</div>

JS：

document.getElementById("AnimationText").classList.add("middle");

CSS：

#AnimationText {
  transition: all 5s ease;
}
.init {
  margin-top: -200px;
}
.middle {
  position: relative;
  margin-top: 250px;
}

https://jsfiddle.net/haev137u/1/

JavaScript动画循环不会停止

2 个答案: