Ergebnis 1 bis 6 von 6
  1. #1
    Sphere ist offline 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(244244244); //Zielfarbe
      
    var _default = new Array(234234234); //Anfangsfarbe beim ersten Aufruf
       
      
    fadeEffect.init(TriggerElementtarget_default1);
    }

    function 
    MouseOut_bg(TriggerElement)
    {
      var 
    target = new Array(234234234); //Zielfarbe
      
    var _default = new Array(244244244); //Anfangsfarbe beim ersten Aufruf
       
      
    fadeEffect.init(TriggerElementtarget_default, -1);
    }

    /*----------------------------------------------------------------------------------------
    ----------------------------------------Hilfs-Funktionen----------------------------------
    ----------------------------------------------------------------------------------------*/

    var fadeEffect=function(){
        return{
            
    init:function(elementtarget_defaultflag)
            {
                
    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(01) == "#"//Hexadezimaler Wert (Internet Explorer)
                
    {
                  
    this.parseInt(this.elem.style.backgroundColor.substring(1,3),16);
                  
    this.parseInt(this.elem.style.backgroundColor.substring(3,5),16);
                  
    this.parseInt(this.elem.style.backgroundColor.substring(5,7),16);
                }
                else if(
    this.elem.style.backgroundColor.substr(03) == "rgb"//RGB-Wert (Firefox)
                
    {
                  var 
    temp this.elem.style.backgroundColor.split(",");
                  
    this.parseInt(temp[0].substring(4));
                  
    this.parseInt(temp[1].substring(1,4));
                  
    this.parseInt(temp[2].substring(1,4));
                }
                else 
    //Wenn dies der erste Aufruf ist, existiert noch kein style.backgroundColor
                
    {
                  
    this._default[0];
                  
    this._default[1];
                  
    this._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.= (this.+ (this.target[0] - this.r) * 0.05);
                
    this.= (this.+ (this.target[1] - this.g) * 0.05);
                
    this.= (this.+ (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);
            }
        }
    }(); 
    Ist irgendwo ein Fehler in meinem Code? Oder funktioniert es einfach nicht setInterval mehrmals laufen zu lassen? Gäbe es ansonsten eine ander Möglichkeit? Eigentlich müsste es möglich sein, denn hier bei diesem Joomla Template geht es auch, nur steig ich nicht durch dieses einzeilige Javascript durch

    Würde mich sehr über eine Antwort freuen.

    mfg Sphere
    Geändert von Sphere (14-09-2011 um 19:53 Uhr)

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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).

  3. #3
    Sphere ist offline Grünschnabel
    registriert
    14-09-2011
    Beiträge
    3

    AW: Mehrere Funktionen mit setInterval gleichzeitig?

    Moin,

    erstmal Danke für die Antwort Dass 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.

    Zitat Zitat von kkapsner Beitrag anzeigen
    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.
    Ok, jetzt verstehe ich das Problem.

    Hui, da hast du ja ne Menge an Code geschrieben Werds mir dann mal anschauen, ich melde mich

    mfg Sphere

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Mehrere Funktionen mit setInterval gleichzeitig?

    falls du mal eine Farbanimation mit meinem Framework live ansehen willst: http://kkjs.kkapsner.de/tests/css.html

  5. #5
    Sphere ist offline 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

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: Mehrere Funktionen mit setInterval gleichzeitig?

    Bitte - gern geschehen.

Ähnliche Themen

  1. mehrere javascript pop-ups gleichzeitig
    Von Jensix im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 10-07-2007, 21:44
  2. mehrere Funktionen gleichzeitig aufrufen
    Von *perplex* im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 10-11-2005, 12:01
  3. Mehrere Verweise gleichzeitig??
    Von Webmaster?? im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 26-06-2005, 14:26
  4. mehrere Objekte gleichzeitig deaktivieren.
    Von Morgooth im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 22-01-2005, 15:16
  5. Mehrere Bilder gleichzeitig formatieren?
    Von maestr0 im Forum Grafik
    Antworten: 6
    Letzter Beitrag: 23-03-2003, 21:56

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •