langsam aufschieben...

[Ferret]

Hallo zusammen.

Ich habe in ein <div> ein Bild gesetzt und direkt danach noch eins mit width:0px.

Jetzt will ich das rechte bild langsam aufschieben... bis 128px.
Dazu hab ich ne Schleife gemacht, die das auch macht!
Aber ich wills ja langsam!
Wenn ich jetzt ein timestamp in die schleife setz, gehts nicht, weil der timestamp ja unabhängig weiterläuft!

Hier mal der Code:

<div style="position:absolute; top:0px; left:128px; width:0px; height:128px; overflow:hidden;" id="nr2">
 <img src="2.jpg" border="0">
</div>

<span style="color:#ffffff; cursor:pointer;" onClick="los2()"><br><br><br><br><br><br><br><br><br> change </span>

<script type="text/javascript">
 function los() {
  var no2width = 0;
  while(no2width<128) {
   no2width++;
   // document.getElementById("nr1").style.width = "0px";
   document.getElementById("nr2").style.width = no2width + "px";
   // document.getElementById("nr2").style.left = "0px";
  }
 }

function los2() {
  window.setTimeout("los()",100);
 }
</script>

[wahsaga]

hi,

Aber ich wills ja langsam!
Wenn ich jetzt ein timestamp in die schleife setz, gehts nicht, weil der timestamp ja unabhängig weiterläuft!
 function los2() {
  window.setTimeout("los()",100);

los2() sorgt bei dir ausschliesslich dafür, das los() zeitverzögert aufgerufen wird.
los() macht dann aber nach wie vor alles "in einem rutsch".

du musst anders ansetzen.
statt der while-schleife (in die du per JS keine zeitverzögerung einbauen kannst), brauchst du eine funktion, die sich selbst immer wieder mit zeitverzögerung aufruft und nur einen einzelnen schritt ausführt, so lange bis die abbruchbedingung erreicht ist.

gruss,
wahsaga

[Ferret]

Hallo wahsaga.

Danke; hab jetzt: (klappt)

var no2width = 0;
 function los2() {
  no2width++;
  if(no2width<128) {
   document.getElementById("nr2").style.width = no2width + "px";
   window.setTimeout("los2()",100);
  }
 }

Noch ne Frage:
Das Bild wird jetzt langsam eingeblendet, ich würde es aber gerne verzerrt aufschieben, sodass man immer den Inhalt sieht, aber verzerrt!

Danke

[Chräcker Heller]

Hallo,

ich würde es aber gerne verzerrt aufschieben, sodass man immer den
Inhalt sieht, aber verzerrt!

(wenn ich Dich richtig verstanden habe...): dann würde ich nichts am div ändern sondern per JS die bildbreite von 0 bis "echter-Bildbreite" ändern...

Chräcker

[Ferret]

Hallo,

Du hast mich richtig verstanden!
Inzwischen hab ichs schon selber rausgefunden ;-P

Ich mach aber beides gleichzeitig, wichtig ist aber, das man dabei immer die Höhe wieder neu angibt, sonst, verkleinert/vergrößert er das Bild proportional:

var no2width = 0;
 var no2left = 128;
 var no1width = 127;

function los() {
  no2width++;
  no2left--;
  no1width--;
  if(no2width<128) {
   document.getElementById("nr2").style.width = no2width + "px";
   document.getElementById("nr2bild").style.width = no2width + "px";
   document.getElementById("nr2").style.left = no2left + "px";
   document.getElementById("nr2bild").style.left = no2left + "px";
   document.getElementById("nr1").style.width = no1width + "px";
   document.getElementById("nr1bild").style.width = no1width + "px";
   document.getElementById("nr1bild").style.height = "128px";
   document.getElementById("nr2bild").style.height = "128px";
   window.setTimeout("los()",10);
  }
 }

Danke dir