Thomas Meinike: Animationen mit dem Timer

Beitrag lesen

SELF-Forum

Animationen mit dem Timer

Thomas Meinike
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln