如何在 for 循环中设置间隔？

Question

我正在尝试创建一个可滑入和滑出页面的社交媒体图标菜单。以下代码有效，但速度太快。它看起来不像滑动。我想我可以使用 setInterval() 方法调整时间，但我无法让它工作。这是到目前为止的代码：

var socialMedia = document.getElementById("socialmedia");
var stalkMe = document.getElementById("pleasestalkme");
function SM() {
socialMedia.style.position = "fixed";
socialMedia.style.right = "-330px";
}
SM(); 
stalkMe.addEventListener("click", function(){ 
    if (socialMedia.style.right === "-330px") {
    for (i = -330; i <= -30; i++) {
        var j = i +"px";
        socialMedia.style.right = j;
    }
    } else if (socialMedia.style.right === "-30px"){
            for (i = -30; i >= -330; i--){
        var j = i +"px";
        socialMedia.style.right = j;
    }
    }
}, false);

Answer 1

您应该看看 CSS 转换。基本上你只需要将 right 样式从 300px 更改为 0px 并使用 transition: right 1s; 你会看到你的元素被动画化

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

不然你可以看看jQuery.....（我觉得不好）

Answer 2

在解决方案之前，请注意：您实际上应该不使用此代码段。相反，听从 floribon 的建议并研究 css 转换。

但是，如果您绝对必须以过时的方式进行操作：

for (i = -330; i <= -30; i++) {
    var j = i +"px";
    socialMedia.style.right = j;
}

写

var hnd;
i = -330;
hnd = setInterval ( function () {
    var j = i +"px";
    socialMedia.style.right = j;
    i++;
    if (i > -30) {
        clearInterval(hnd); // end activity
    }
}, 50 ); // interval length in ms

如何在 for 循环中设置间隔？

How do I set the interval in a for loop?

javascript

for-loop

setinterval