多次运行时Javascript动画闪烁

时间:2016-03-11 01:53:21

标签: javascript

所以这是我第一次尝试使用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

2 个答案:

答案 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")
    }