Ortwin: Animationen mit dem Timer

Hallo

Ich möchte eine Fade-In Animation schreiben, die kontinuierlich abläuft. Diese Möglichkeit habe ich schon probiert:

function over(i) {
 irgendeinObjekt.filters.alpha.opacity = i;
 i++;
 setTimeout("over(" + i + ")", 1);
}

Jetzt möchte ich das selbe ohne sich wiederholenden Funktionsaufruf schreiben:

function over(i) {
while(i<100)
{
 irgendeinObjekt.filters.alpha.opacity = i;
 i++;
 setTimeout("[egal, z. B. i++]", 1);
}
}

Diese Funktion funktioniert aber so nicht, da das übergebene Argument der setTimeout-Methode anscheinend erst nach Beendigung der Funktion aufgerufen wird. Schön wäre es, wenn es eine Sleep-Methode geben würde.

Mein entgültiges Ziel ist es, mit der selben Funktion mehrere Fades gleichzeitig, je nach dem entsprechenden Objekt, ablaufen zu lassen. Aber nur wie?

Auf meiner HP hab ich schon sowas mit der oberen Methode erzeugt. (nur IE)

Grüße

Ortwin

  1. function over(i) {
    irgendeinObjekt.filters.alpha.opacity = i;
    i++;
    setTimeout("over(" + i + ")", 1);
    }

    Les doch mal die Dokumentation zu window.setTimeout(), dann kannst du verstehen warum das nicht so funktioniert wie du dir das vorstellst.

    Diese Funktion funktioniert aber so nicht, da das übergebene Argument der setTimeout-Methode anscheinend erst nach Beendigung der Funktion aufgerufen wird. Schön wäre es, wenn es eine Sleep-Methode geben würde.

    gibt es nicht.

    Struppi.

  2. Hallo,

    Mein entgültiges Ziel ist es, mit der selben Funktion mehrere Fades gleichzeitig, je nach dem entsprechenden Objekt, ablaufen zu lassen. Aber nur wie?

    Probiere es so (fuer IE und Mozilla):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test by TM 07/04</title>
    <script language="JavaScript" type="text/javascript">
    <!--

    var i=0,bla1,bla2,bla3,ie=false,moz=false;

    function init()
    {
      if(typeof(document.body.style.filter)!="undefined")ie=true;
      else if(typeof(document.body.style.MozOpacity)!="undefined")moz=true;

    bla1=document.getElementById("bla1").style;
      bla2=document.getElementById("bla2").style;
      bla3=document.getElementById("bla3").style;

    over();
    }

    function over()
    {
      i++;

    if(ie)
      {
        bla1.filter="Alpha(opacity="+i+")";
        bla2.filter="Alpha(opacity="+i+")";
        bla3.filter="Alpha(opacity="+i+")";
      }
      else if(moz)
      {
        bla1.MozOpacity=i/100;
        bla2.MozOpacity=i/100;
        bla3.MozOpacity=i/100;
      }

    if(i<100)setTimeout("over()",100);
    }

    //-->
    </script>
    </head>
    <body onload="init()">
    <span id="bla1" style="color: #FFF; background-color: #F00; -moz-opacity: 0; filter: Alpha(opacity=0); position: absolute">bla 1</span><br>
    <span id="bla2" style="color: #FFF; background-color: #090; -moz-opacity: 0; filter: Alpha(opacity=0); position: absolute">bla 2</span><br>
    <span id="bla3" style="color: #FFF; background-color: #00C; -moz-opacity: 0; filter: Alpha(opacity=0); position: absolute">bla 3</span>
    </body>
    </html>

    Hinweis: position: absolute; braucht offenbar der IE.

    MfG, Thomas

    1. Diese Lösung bringt mir wenig, da die Fades unabhängig voneinander laufen sollen. Wenn es so funktionieren soll, werd ich wohl für jeden Fade eine eigene Variable brauchen, die hochzählt, sobald die Aktion eingetreten ist.

      Aber gibt es denoch nicht eine "klügere" Methode, wo man nicht jeden Fade je Element schreiben muss?

      Die blau aufleuchtenden Buttons auf meiner HP (nur IE) benutzen eine Fade-Methode. Wenn ich jedoch über einen anderen Button gehe, leuchtet der auf, und der andere hört auf. Das möchte ich vermeiden.

      Grüße

      Ortwin

      1. Aber gibt es denoch nicht eine "klügere" Methode, wo man nicht jeden Fade je Element schreiben muss?

        du musst nur die SetTimeout funktion richtig benutzen, den Link hab ich dir ja schon gezeigt.

        Struppi.

        1. jeden Fade je Element schreiben muss?

          du musst nur die SetTimeout funktion richtig benutzen, den Link hab ich dir ja schon gezeigt.

          Man müsste sich nur auf dieser Seite zurechtfinden, was ich etwas schwierig finde. Ich hab da nichts über diese Funktion gefunden.

          Grüße

          Ortwin

          1. Man müsste sich nur auf dieser Seite zurechtfinden, was ich etwas schwierig finde. Ich hab da nichts über diese Funktion gefunden.

            Du hast recht, ich hatte dir nicht den Link gezeigt, ich meinte natürlich selfhtml http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout, meine Seite ist ja keine Dokumnetation.

            Struppi.