Skript macht Pause, bevor es losgeht...

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
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

Gestreifter Böhmischer Borsdorfer
Registriert
06.11.08
Beiträge
3.396
bei mir huscht das erst nach einer halben minute

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

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
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 Intervallo_O
 

torben1

Weisser Rosenapfel
Registriert
05.08.08
Beiträge
795
Setzte die Div mal über das Script. Oder das Script unter die Div ;)

Torben
 

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
Gesagt, getan - keine Besserung... :(
 

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
Leider nein. Er wartet immer ein Intervall ab, ehe er tatsächlich die Funktion startet.
 

vcr80

Gestreifter Böhmischer Borsdorfer
Registriert
06.11.08
Beiträge
3.396
davon abgesehen bleiben die wolken etwas im bild stehen (rechts) und verschwinden dann einfach.
 

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
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

Niederhelfenschwiler Beeriapfel
Registriert
18.01.07
Beiträge
843
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.
 
  • Like
Reaktionen: C64

C64

Kaiser Alexander
Registriert
12.04.06
Beiträge
3.957
Ok, so etwas ähnliches dacht ich mir schon. Aber so einfach die Lösung :p
Danke dir, das hat geklappt;)
 

arami

Niederhelfenschwiler Beeriapfel
Registriert
18.01.07
Beiträge
843
Bitte schön, gern geschehen....