Probeleme bei einfacher Animation mit Javascript

ElementZ · 06.04.2012

Hallo,
ich habe mir vor kurzem das Buch "Javascript" von Stefan Koch gekauft und habe mich da jetzt auch fast bis zum Ende durchgelesen. Mein Grund, Javascript zu erlernen war vor allen Dingen die Erstellung von Animationen ohne lästiges Flash. Nun habe ich mir das eigentlich ganz einfach vorgestellt.

HTML:

<!DOCTYPE html>
<html>
<head>
* <meta charset="UTF-8">
* <meta name="viewport" content="width=device-width">
* <title>animation</title>
* <link rel="stylesheet" href="style.css" />
* <script>
function bewegen() {
var x = document.getElementById("test");
var abstand = x.style.left + 20;

}
function starten() {
meinInterval = setInterval("bewegen()", 1000);
}

</script>
</head>
<body
* <h1>animation</h1>
* <div id="test" style="background:black; width:20px; height:20px; position:absolute; left:20px;"></div>
<script>
starten();
</script>
</body>
</html>

Wie man unschwer erkennen kann, habe ich zwei Funktionen definiert. Einmal, die jede Sekunde die Funktion bewegen() aufruft und die andere, die dann eigentlich den Abstand des div-Blocks "test" um 20px erhöhen soll. Das Problem für mich ist, dass ich nicht weiß, wie ich zu dem vorherigen Wert also 20px weitere 20px hinzuaddieren kann. Also so, dass sich der Abstand von links quasi pro Sekunde um 20px erhöht. Ich habe schon folgendes probiert:

HTML:

function bewegen() {
var x = document.getElementById("test");
var abstand = x.style.left;
abstand + "20px";

}

oder bspw.

HTML:

function bewegen() {
var x = document.getElementById("test");
x.style.left += "20px";

}

Hat logischerweise alles nicht funktioniert, wäre ja auch zu einfach.

Kann mir da jemand helfen? Dass das Programm den Abstand links jede Sekunde um 20px erhöht?

Ich bedanke mich schon mal für Antworten & wünsche allerseits schöne Ostern !

ElementZ

Tr3icio · 06.04.2012

AW: Probeleme bei einfacher Animation mit Javascript

PHP:

x.style.left = (parseInt(x.style.left.substring(0, x.style.left.length - 2)) + 20) + "px";

Saubere Variante ^^
Du nimmst vom Style die letzten beiden Zeichen weg (also das px), machst daraus einen int, fügst 20 hinzu und hängst noch px an.
Man kann es natürlich noch anders machen, aber so sollte es keine Probleme verursachen können.

ElementZ · 07.04.2012

AW: Probeleme bei einfacher Animation mit Javascript

Danke Danke Danke !

Mir schwebte etwas ähnlichesnvor, doch wusste ich nicht,mwie ich das umsetzen kann. Danke nochmal

Frohe Ostern

mindraper · 10.04.2012

AW: Probeleme bei einfacher Animation mit Javascript

hi.

das ginge auch einfacher! parseInt() wandelt einen string in einen integer-wert und schneidet dabei so oder so die beiden "px" weg.

PHP:

x.style.left = ( parseInt( x.style.left, 10 ) + 20 ) + 'px';

ab es5 ist die übergabe des ersten parameters von setInterval & setTimeout als string deprecated. das sollte so ausschauen:

PHP:

var bewegen = function(){
   var x = document.getElementById( 'test' );
   x.style.left = ( parseInt( x.style.left, 10 ) + 20 ) + px;
}
var interval = setInterval( bewegen, 1000 );

dann gibt's auch keine probleme mit dem strict-mode. und der code ist wesentlich leichter zu lesen.

gruß

Tr3icio · 10.04.2012

AW: Probeleme bei einfacher Animation mit Javascript

Aber auf parseInt() zu vertrauen finde ich nicht schlau, da es immer sein könnte, dass ein Browser die Buchstaben in den Wert einberechnet.

mindraper · 10.04.2012

AW: Probeleme bei einfacher Animation mit Javascript

hi.

@tr3icio:

nonsens. noch nicht mal der ie 7 im quirks mode lässt die buchstaben drinne. parseInt() wird in allen wichtigen browsern seit folgenden versionen korrekt unterstützt:

ie: 3 ( aktuelle version ist 9 )
opera: 5.12 ( aktuelle version ist 11.52 )
firefox: 1.0 ( aktuelle version ist 11 )
chrome: 1.0 ( aktuelle version ist 18 )
safari : 1.0 ( aktuelle version ist 5.15 )

selbst der netscape navigator ab version 2.0 kann / konnte parseInt() vollkommen korrekt.

zeig' mir einen browser der es falsch umsetzt, dann sehen wir weiter.

aber da wir gerade schon bei dem thema sind: deine version ist unsauber. parseInt hat nämlich 2 parameter.
und wenn du schon der meinung bist, du müsstest die buchstaben wegschneiden, dann ginge das auch kürzer als in deiner variante: mit slice().

schönen abend noch