Question

我之前已经问过类似的问题，但答案对我没有帮助，因为它们对我和我的简单动画来说太先进了。我正处于javascript的最开始。在我的网站上，我有一个简单的代码，用于将元素从一个posotion移动到另一个posotion。我希望它在到达最终位置时消失，不会消失，只是突然消失。我应该用不透明度改变吗？我怎么写呢？我的代码如下。

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 380) {
            clearInterval(id);


        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';

        }
    }

}

Answer 1

要隐藏元素，只需将style.display设置为“none”即可。

例如：

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;
    var id = setInterval(frame, 5);

    function frame() {
        if (pos == 380) {
            clearInterval(id);
            // this is the key line
            elem.style.display = 'none';

        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';

        }
    }

就像抬头一样，使用链式setTimeouts比在HTML动画中使用setInterval更好。原因是如果动画（和/或页面上的其他脚本）花费的时间长于浏览器将无响应的时间间隔。使用setTimeouts链，时钟在当前帧结束之前不会开始计时。

例如，你可以这样做：

function myMove() {
    var elem = document.getElementById("animation");
    var pos = 100 ;

    function frame() {
        if (pos == 380) {
            // this is the key line
            elem.style.display = 'none';

        } else {
            pos++;
            elem.style.top = pos + 'px';
            elem.style.left = pos + 'px';
            // set a timeout for 5 ms
            setTimeout(myMove, 5);
        }
    }

如何在javascript动画结束时隐藏元素

1 个答案: