所以这是我第一次尝试使用JS动画。我刚修改了一个简单的教程来创建一个边框,当你单击一个元素时它会淡出。它第一次完美运行,但每次随后的点击都会闪烁,行为奇怪。我无法解决问题所在。
function move(elem) {
var left = 1
function frame() {
left = left - 0.1 // update parameters
elem.style.border = '6px solid rgba(48, 28, 237, '+left+')';
if (left == 0) // check finish condition
clearInterval(id)
}
var id = setInterval(frame, 100) // draw every 10ms
}
HTML:
<div onclick="move(this)" class="example_path"></div>
Codepen - http://codepen.io/anon/pen/jqrwoo
答案 0 :(得分:3)
javascript count浮点数是不准确的, 例如: 的console.log(0.1 + 0.2); 不是0.3,是0.30000000000000004, 所以... &#34;左=左 - 0.1&#34;永远不等于&#34; 0&#34; 应该 &#34; if(left == 0)&#34; 修改 &#34; if(left&lt; = 0)&#34; 对不起,我的英语不好,表达了黯淡。
答案 1 :(得分:2)
您的间隔未清除。试试这个(如果)条件:
if (left <= 0) { // check finish condition
clearInterval(id)
// alert("cleared")
}