Javascript - Animation flackert, wenn mehrmals ausgeführt

Question

Ich habe eine ziemlich einfache Grenze Highlight Animation erstellt, die gut funktioniert. Aber wenn Sie mit der Maus darüber fahren, während es bereits animiert, flippt es total aus.

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); 
    } 
    } 
} 

Wenn Sie alles in Aktion sehen möchten, hier ist die URL.

Ich weiß, dass dies ein ähnliches Thema zu anderen hier ist, aber ich habe keine Antwort gefunden, die meiner speziellen Situation entspricht (oder zumindest nicht verstehe, wie es passt).

Vielen Dank im Voraus für jegliche Hilfe oder konstruktive Kommentare.

Answer 1

Zuerst würde ich Ihnen raten, jquery zu benutzen. Ihr Code wird Crossbrowser und viel einfacher sein.

Truble mit Ihrer Funktion ist, dass es mehrere mal läuft, während Benutzer Maus über das div bewegt.

Der einfachste Weg zu beheben ist, den Funktionsaufruf auf mouseenter Ereignis statt mouseover zu setzen.

Aber der richtige Weg ist, Ihre Funktion neu zu schreiben und vor dem Start der Animation zu überprüfen, ob die Animation für dieses spezielle div bereits gestartet ist.

In der sehr Anfang Ihrer Funktion setzen diese:

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 

Und nicht vergessen attrinbute zu entfernen, wenn Animation beendet ist.