DHTML Javascript

[weissNix]

Bin vor kurzen ein bisschen in berührung mit DHTML gekommen und habe mir dann mal gedacht so könnte man einfach eine Box ausblenden, wesshalb dieses Script basteltet, was aber nicht so funktioniert wie es sollte

Nun wollte ich fragen ob es überhaupt sinnvoll ist etwas so auszublenden oder gibt es da bessere Methoden?

CODE <script language="JavaScript">
function forward() {
hoch = document.getElementById('box').style.height.replace('px','')
do{
hoch--;
document.getElementById('box').style.height=hoch;
}while(hoch>0);
}
</script>



CODE <div style="height:200px; width: 30px; background-color:##000000" id="box" onclick="forward()">

</div>


Greetz weissNix

EDIT: Achja und die Box wird mit diesem Script direkt geschlossen, das heisst es gibt keinen effekt

 

[Joel]

Das Script wird in einer Millisekunde abgearbeitet, sodass kein Effekt zu sehen ist.

Animationen mit der Funktion window.setTimeout("forward('&#39",40); machen. Diese Funktion ruft die angegebene Methode nach 40 Millisekunden wieder auf. So kannst du schrittweise bei jedem Funktionsaufruf das teil verkleinern.

Ungefähr so:
CODE
function forward() {
hoch = document.getElementById('box').style.height.replace('px','')
if (hoch > 0) {
hoch--;
document.getElementById('box').style.height=hoch;
window.setTimeout( 'forward()', 40 );
}

 

[weissNix]

QUOTE (J Janser @ Mi 20.9.2006, 12:22) Das Script wird in einer Millisekunde abgearbeitet, sodass kein Effekt zu sehen ist.

Animationen mit der Funktion window.setTimeout("forward('&#39",40); machen. Diese Funktion ruft die angegebene Methode nach 40 Millisekunden wieder auf. So kannst du schrittweise bei jedem Funktionsaufruf das teil verkleinern.

Ungefähr so:

CODE
function forward() {
hoch = document.getElementById('box').style.height.replace('px','')  
if (hoch > 0) {
 hoch--;
 document.getElementById('box').style.height=hoch;
 window.setTimeout( 'forward()', 40 );
}



Vielen Dank es scheint zu funktionieren aber irgendwie geht es ziemlich lange bis das Fenster zu ist, auch wenn ich den timeout auf eine Millisekunde herabsetzte, obwohls dann ja eigentlich recht schnell sein soll, also theoretisch in zwei sekunden zu (?), weisst du woran das noch liegen mag?

 

[Joel]

QUOTE
Vielen Dank es scheint zu funktionieren aber irgendwie geht es ziemlich lange bis das Fenster zu ist, auch wenn ich den timeout auf eine Millisekunde herabsetzte, obwohls dann ja eigentlich recht schnell sein soll, also theoretisch in zwei sekunden zu (?), weisst du woran das noch liegen mag?


Ja, du solltest nicht pixel um pixel verschieben, sondern immer gleich 8 Pixel oder ähnliches. Weil das sind zum Teil aufwändige Rendering angelegenheiten welche viel länger als 1 Millisekunde dauern, ...

 

[adri]

Hallo weissNix,

man muss das Rad ja auch nicht immer neu erfinden. Hier eine kleine aber feine Scriptbibliothek die dir weiterhelfen wird:

http://moofx.mad4milk.net/
Zugehörige Dokumentation:
http://moofx.mad4milk.net/documentation/

Was du suchst ist gleich der este Punkt in der Dokumentation:
CODE var myEffect = new fx.Height(myelement , {duration: 500, onComplete: function()
{
alert('the effect is completed');
}
});


Grüße,
Adrian

 

[weissNix]

QUOTE (J Janser @ Mi 20.9.2006, 12:42)
QUOTE
Vielen Dank es scheint zu funktionieren aber irgendwie geht es ziemlich lange bis das Fenster zu ist, auch wenn ich den timeout auf eine Millisekunde herabsetzte, obwohls dann ja eigentlich recht schnell sein soll, also theoretisch in zwei sekunden zu (?), weisst du woran das noch liegen mag?


Ja, du solltest nicht pixel um pixel verschieben, sondern immer gleich 8 Pixel oder ähnliches. Weil das sind zum Teil aufwändige Rendering angelegenheiten welche viel länger als 1 Millisekunde dauern, ...

Vielen Dank, jetz gehts schneller

Aber irgendwie siehts nun recht dämlich aus, also recht rucklig, bringt man mit javascript auch irgendwie flüssige animationen hin?