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循环中设置间隔？

2 个答案: