Hüpfendes Objekt mit Javascript erzeugen

[Wouzhuo]

Hallo B4rnY,

deine ursprüngliche Symptombeschreibung kann nicht stimmen. Ich beobachte nämlich, dass sich das Objekt zuerst nach unten bewegt und dann aber quasi stehenbleibt und "zittert".

Überleg mal, was bei deiner Funktion passiert. Zuerst ist a = 0 und die Bedingung ist erfüllt, sodass a um 1 erhöht wird und das Objekt 1px nach unten rutscht. Soweit so gut. Die Funktion ruft sich dann selbst auf und das ganze passiert immer wieder. a = 1, a = 2, a = 3, ... und so weiter, bis a = 20.

Sobald a = 20 ist, ist die Bedingung nicht mehr erfüllt und es wird in den else-Teil gesprungen, wo a um 1 reduziert wird. Also ist a jetzt = 19. Das Objekt rutscht einen Pixel nach oben. Jetzt ruft sich die Funktion wieder selbst auf und da a jetzt = 19 ist, ist die Bedingung wieder erfüllt und a wird um 1 erhöht. Das Objekt rutscht wieder um 1 nach unten... jetzt ist a = 19 sodass es beim nächsten mal wieder einen nach unten rutscht und wieder 20 ist... dadurch rutscht es wieder einen nach oben und ist wieder 19 und so weiter und so fort.

Ich gebe dir folgenden Tipp: anstatt eine einzige Funktion start() zu schreiben, ist es viel einfacher, wenn du zwei Funktionen schreibst. z.B. function hoch() und function runter(). Am Anfang startest du mit runter() und sobald das Element unten ist, ruft runter() sich nicht mehr selbst auf, sondern stattdessen hoch(). Und hoch() sorgt dafür, dass das Element sich nach oben bewegt und ruft runter() auf, sobald das Element wieder ganz oben ist.

Hilft dir das weiter?

var a = 0;

function start() {
  if (a < 20) {
    a = a + 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  } else {
    a = a - 1;
    document.getElementById("icon").style.top = a+ "px";
    window.setTimeout("start()", 25);
  }
}