JavaScript Divs per Function flüssig bewegen

[Messinho]

Hallo CB'ler,

ich will ein div per function bewegen. Ist aber gar nicht so leicht !

function moveDiv()
{
var myDiv = document.getElementById('myDiv');

for(var i = 0; i < 10; i++)
{
    myDiv.style.left -= 5;
    myDiv.style.top -= 5;
    //waitfunction
}

}

Wie realisiere ich ein wait von 0,5 Sekunden?

 

[_daniel_999]

Hallo,

benutz doch jquery (http://www.jquery.com
da gibt es eine funktion die nennt sich animate (http://api.jquery.com/animate/), damit kannst du das ganz leicht umsetzen.

mfg

 

[DasBoeseLebt]

Entweder mit setTimeout() oder mit setInterval().

http://de.selfhtml.org/javascript/objekte/window.htm#set_interval
http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout

 

[Daaron]

Wenn du auf IE-User verzichten kannst (kann der 10er endlich tolles Zeug?), dann mach es doch per CSS-Transitions. Schalte per JS nur zwischen Start- und Endposition um (z.B. indem du eine Klasse hinzufügst oder entfernst), den Rest berechnet ein anständiger Browser dann selbst.

Alternativ: JQuery war ja schon genannt, wenns mal was anderes sein soll, dann dürften die verschiedenen Optionen der Fx-Klasse von Mootools das Richtige dabei haben (ich schätze mal, aus dem Kopf, Fx.Tween)

 

[mercsen]

Für jQuery gibt es auch wunderbare easing plugins um der animation den richtigen pepp zu geben.
So etwas wie wait() gibt es in JS nicht direkt, nur die oben genannten setTimeout() und setIntervall methoden des window objekts (können aber auch ohne aufgerufen werden)

Bei animationen gibt es nämlich noch ne menge zu beachten, ich weiß ja nicht was du genau vor hast, aber was wäre z.b. wenn die eine animation noch läuft aber auf dem selben div eine andere gestartet wird? dann hast nen ziemlich wild umherspringendes DIV

nimm lieber ein Framework wie Mootool, Prototype oder aber (mein all-time-favorit) jQuery, die managen das alles