Question

我创建了一个相当简单的边框高亮动画，效果很好。但是当你已经将它鼠标悬停在动画上时，它就会变得非常怪异。

function borderHighlight (x) {
var start = 0;
var end = 255;
var current = 0;
var boo = 0;
var id = setInterval (frame, 5);

function frame() {
    if (current < end && boo == 0) {
        x.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        x.parentNode.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        current ++;
    } else if (current == end && boo == 0) {
        boo = 1;
    } else if(current >= start && boo == 1) {
        x.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        x.parentNode.style.borderColor = "rgb(" + current + ", " + current + "," + current + ")";
        current --;
    } else {
        clearInterval(id);
    }
  } 
}

如果您希望全部看到这一切，请点击这里的网址。 http://ne.fario.us/projects/writing/

我知道这是与其他人类似的话题，但我找不到适合我具体情况的答案（或者至少我不了解它是如何适合的）。

提前感谢您提供任何帮助或建设性意见。

Answer 1

首先，我建议你使用jquery。您的代码将是crossbrowser并且更加简单。

Truble与您的功能是，当用户将鼠标移动到div上时，它会运行几次次。

最简单的修复方法是将函数调用放在mouseenter事件而不是mouseover上。

但正确的方法是重写你的函数并在开始动画之前检查是否已经开始了这个特定div的动画。

在你的职能刚刚开始的时候把这个：

if (x.hasAttribut('playing')) return; //if animation is playing no need to restart
x.setAttribute('playing', playing); //we put temporary attribute stating, that animation is playing

动画完成时不要忘记删除attrinbute。

Javascript - 多次运行时动画闪烁

1 个答案: