Skript macht Pause, bevor es losgeht...

[C64]

Ich hab hier mal ein Testskript, dass ich evtl. mal ähnlich in einer Homepage einsetzen möchte geschrieben:

<script type="text/javascript">
var t = 370;
var k = 150;
function cloud(wolke,time,oben){
k = k - t;
if (k < -t){
k = 150;
$(wolke).css({"backgroundPosition": -k+'% '+oben+'px'},0);
k = k - t;
}
$(wolke).animate({"backgroundPosition": -k+'% '+oben+'px'},time-500);
}
$(document).ready(function(){
setInterval("cloud('#clouds',14000,-50)", 14000);
setInterval("cloud('#cloud1',17000,50)", 17000);
})
</script>

Es soll also so aussehen, dass Wolken mit unterschiedlicher Geschwindigkeit von links nach rechts durchs Bild huschen. Das klappt auch wunderbar.
Die zwei Divs sind mit absolute und width=100% übereinander im Browser platziert und das Hintergrundbild (die Wolke) wird jeweils durch die Funktion cloud verschoben.

Mein einziges Problem ist der Start. Am Anfang dauert es immer erst mal, bevor die erste Wolke erscheint. Danach läuft es flüssig. Irgendwo hab ich also scheinbar einen Denkfehler, weil die Wolken scheinbar ein Intervall lang zunächst stehen bleiben.

Kann mir jemand auf die Sprünge helfen? "setInterval" hab ich das erste Mal verwendet. Vielleicht hab ich es nicht richtig eingesetzt?

Vielen Dank schon mal für eure Tips

 

[vcr80]

bei mir huscht das erst nach einer halben minute

kanns sein, dass du die wolken zu weit außerhalb des bildes positionierst?

 

[C64]

bei mir huscht das erst nach einer halben minute

kanns sein, dass du die wolken zu weit außerhalb des bildes positionierst?

Genau das ist das Problem eben. Das meinte ich mit Pause - danach "flutschts"...
Ich hab mal alle mit CSS auf 0 positioniert. Dann sieht man, dass es tatsächlich eben erst mal ne Zeit braucht, bis der erste Move passiert.
Es vergeht scheinbar genau ein setIntervall ohne das eine Bewegung stattfindet. Aber eigentlich ist der erste errechnete Wert für k=-220 und damit ist es nicht kleiner als -t und damit müsste der erste Move gleich mal nach 220% gehen. Er tut aber erst mal gar nix im ersten Intervall

 

[torben1]

Setzte die Div mal über das Script. Oder das Script unter die Div

Torben

 

[C64]

Gesagt, getan - keine Besserung...

 

[vcr80]

Gesagt, getan - keine Besserung...

am interval rumbasteln bringt auch nix?

 

[C64]

Leider nein. Er wartet immer ein Intervall ab, ehe er tatsächlich die Funktion startet.

 

[vcr80]

davon abgesehen bleiben die wolken etwas im bild stehen (rechts) und verschwinden dann einfach.

 

[arami]

So, bei mir funktionierts jetzt. Probier mal folgendes:

setInterval("cloud('#clouds',14000,200)", 14000);

ändern in

setInterval("cloud('#clouds',14000,200)", 2000);

sollte somit in 2 statt 14 Sekunden starten.

lg

 

[C64]

davon abgesehen bleiben die wolken etwas im bild stehen (rechts) und verschwinden dann einfach.

Ja, ich habe es aktuell etwas reingeschoben, damit ich sehe, wie lange sie dort stehen bleiben
Das wird am Ende wieder verändert.

Habs es jetzt noch mal deutlich vereinfacht, aber trotzdem hab ich den Fehler noch:

<script type="text/javascript">
function cloud(wolke,zeit,oben){
$(wolke).animate({"backgroundPosition": '200% '+oben+'px'},zeit-500, function(){
$(wolke).css({"backgroundPosition": '-150% '+oben+'px'},0);
});
}
$(document).ready(function(){
setInterval("cloud('#clouds',14000,200)", 14000);
setInterval("cloud('#cloud1',17000,50)", 17000);
setInterval("cloud('#cloud2',27000,-100)", 27000);
})
</script>

 

[arami]

Der Grund dafür das es ma Anfang schon verzögert ist der, dass setInterval erst nach Ablauf des Intervals, bei dir 14000 ms, auslöst. Du könntest für den ersten Start direkt mit setTimeout und einer Zeit von 0 starten. setTimeout wird nur einmal anstatt immer ausgelöst. Die weitere Bewegung könntest du dann wie gehabt mit setInterval machen.

 

[C64]

Ok, so etwas ähnliches dacht ich mir schon. Aber so einfach die Lösung
Danke dir, das hat geklappt

 

[arami]

Bitte schön, gern geschehen....