Ergebnis 1 bis 6 von 6
-
14-09-2011, 19:47 #1
Grünschnabel
- registriert
- 14-09-2011
- Beiträge
- 3
Mehrere Funktionen mit setInterval gleichzeitig?
Hallo,
bin kompletter Neuling in Sachen JavaScript, hab es mir jetzt jedoch in den Kopf gesetzt ein Menü zu programmieren, in dem bei mouseOver über die Menü-Elemente die Hintergrundfarbe langsam heller wird, als eine Art Highlight. Funktionierte nach einer ganzen Weile rumbasteln an einem Skript dass die Transparenz eines Elementes faden lässt auch ganz gut. Jedoch habe ich nun das Problem, dass wenn ich den Mauszeiger über ein Menü-Element bewege und dann sofort auf das nächste gehe, die "Umkehr-Animation" (also die Animation, die das Menu-Item wieder dunkler macht) zugunsten der Animation für dieses nächste Element stoppt/nicht mehr ausgeführt wird. Es scheint mir so, als könnte ich nicht zwei Funktionen gleichzeitig mit setInterval laufen lassen:
(Natürlich kein PHP, scheint mir aber wegen Farbhervorhebung recht sinnvoll)
PHP-Code:function MouseOver_bg(TriggerElement)
{
var target = new Array(244, 244, 244); //Zielfarbe
var _default = new Array(234, 234, 234); //Anfangsfarbe beim ersten Aufruf
fadeEffect.init(TriggerElement, target, _default, 1);
}
function MouseOut_bg(TriggerElement)
{
var target = new Array(234, 234, 234); //Zielfarbe
var _default = new Array(244, 244, 244); //Anfangsfarbe beim ersten Aufruf
fadeEffect.init(TriggerElement, target, _default, -1);
}
/*----------------------------------------------------------------------------------------
----------------------------------------Hilfs-Funktionen----------------------------------
----------------------------------------------------------------------------------------*/
var fadeEffect=function(){
return{
init:function(element, target, _default, flag)
{
this.elem = element; //das Element, das das Event ausgeloest hat
this.flag = flag; //Die Richtung, 1 = vorwaerts, -1 = rueckwaerts
this.target = new Array(); //die Ziel-Farbe
if(this.elem.style.backgroundColor.substring(0, 1) == "#") //Hexadezimaler Wert (Internet Explorer)
{
this.r = parseInt(this.elem.style.backgroundColor.substring(1,3),16);
this.g = parseInt(this.elem.style.backgroundColor.substring(3,5),16);
this.b = parseInt(this.elem.style.backgroundColor.substring(5,7),16);
}
else if(this.elem.style.backgroundColor.substr(0, 3) == "rgb") //RGB-Wert (Firefox)
{
var temp = this.elem.style.backgroundColor.split(",");
this.r = parseInt(temp[0].substring(4));
this.g = parseInt(temp[1].substring(1,4));
this.b = parseInt(temp[2].substring(1,4));
}
else //Wenn dies der erste Aufruf ist, existiert noch kein style.backgroundColor
{
this.r = _default[0];
this.g = _default[1];
this.b = _default[2];
}
clearInterval(this.elem.id); //wenn dieses Element bereits animiert wird unterbrechen
this.target = target;
this.elem.id = setInterval(function(){fadeEffect.tween()}, 20); //Animation starten
},
tween:function()
{
if (this.flag == 1)
{
if (Math.round(this.r) >= this.target[0] && Math.round(this.g) >= this.target[1] && Math.round(this.b) >= this.target[2]) //wenn die Zielfarbe erreicht ist
{
clearInterval(this.elem.id); //Animation beenden
return;
}
}
else if (this.flag == -1)
{
if (Math.round(this.r) <= this.target[0] && Math.round(this.g) <= this.target[1] && Math.round(this.b) <= this.target[2]) //wenn die Zielfarbe erreicht ist
{
clearInterval(this.elem.id); //Animation beenden
return;
}
}
else
{
clearInterval(this.elem.id);
return;
}
//neue RGB-Werte berechnen (ans Ziel annaehern)
this.r = (this.r + (this.target[0] - this.r) * 0.05);
this.g = (this.g + (this.target[1] - this.g) * 0.05);
this.b = (this.b + (this.target[2] - this.b) * 0.05);
//in Hexadezimal Farbwert Umwandeln und bg-Farbe aendern
var hexr = Math.round(this.r).toString(16);
var hexg = Math.round(this.g).toString(16);
var hexb = Math.round(this.b).toString(16);
this.elem.style.backgroundColor = ("#" + hexr + hexg + hexb);
}
}
}();
Würde mich sehr über eine Antwort freuen.
mfg SphereGeändert von Sphere (14-09-2011 um 19:53 Uhr)
-
14-09-2011, 21:53 #2
AW: Mehrere Funktionen mit setInterval gleichzeitig?
Dass du das ID-Attribut der HTML-Elemente missbrauchst ist nicht schön, aber auch nicht das Problem.
Das Problem ist, dass du nur fadeEffekt-Objekt hast und du somit bei jedem neuen .init die .elem-Eigenschaft überschreibst und dann in der .tween-Funktion keinen Zugriff mehr auf die ersten Animationseigenschaften (Ziel und Element) hast.
Schau' dir hier mal die css.animate-Function an.
PS: mit diesem Script kann es passieren, dass du ungültige Farben setzt (z.B. r=255,g=0,b=0 => #FF00 => keine valide CSS-Farbe).
-
15-09-2011, 20:46 #3
Grünschnabel
- registriert
- 14-09-2011
- Beiträge
- 3
AW: Mehrere Funktionen mit setInterval gleichzeitig?
Moin,
erstmal Danke für die AntwortDass ich das ID-Attribut missbrauche ist mir gar nicht aufgefallen, war so gedacht dass es für jedes Element dann eine ID geben sollte (id war zufällig gewählt), wusste nicht dass ich damit gleichzeitig das HTML-Attribut id verändere.
Ok, jetzt verstehe ich das Problem.
Hui, da hast du ja ne Menge an Code geschriebenWerds mir dann mal anschauen, ich melde mich
mfg Sphere
-
16-09-2011, 00:08 #4
AW: Mehrere Funktionen mit setInterval gleichzeitig?
falls du mal eine Farbanimation mit meinem Framework live ansehen willst: http://kkjs.kkapsner.de/tests/css.html
-
17-09-2011, 01:31 #5
Grünschnabel
- registriert
- 14-09-2011
- Beiträge
- 3
AW: Mehrere Funktionen mit setInterval gleichzeitig?
Hallo,
habe nach einiger Zeit Rätseln, was denn einzelne Code-Abschnitte bedeuten könnten, nun ein vom groben Aufbau her ähnliches Skript basteln können und es funktioniert super! Vielen, vielen Dank kkapsner *verbeug*
mfg Sphere
-
17-09-2011, 01:54 #6
Ähnliche Themen
-
mehrere javascript pop-ups gleichzeitig
Von Jensix im Forum JavaScriptAntworten: 3Letzter Beitrag: 10-07-2007, 21:44 -
mehrere Funktionen gleichzeitig aufrufen
Von *perplex* im Forum JavaScriptAntworten: 3Letzter Beitrag: 10-11-2005, 12:01 -
Mehrere Verweise gleichzeitig??
Von Webmaster?? im Forum AllgemeinesAntworten: 1Letzter Beitrag: 26-06-2005, 14:26 -
mehrere Objekte gleichzeitig deaktivieren.
Von Morgooth im Forum JavaScriptAntworten: 0Letzter Beitrag: 22-01-2005, 15:16 -
Mehrere Bilder gleichzeitig formatieren?
Von maestr0 im Forum GrafikAntworten: 6Letzter Beitrag: 23-03-2003, 21:56
Lesezeichen