Hallo ich habe eine kleine animation die ich mit jquery bauen möchte.
zb. sollen zeit versetzt Objekte „einfahren“. und andere Objekte von rechts nach links fliegen und loopen.

zum loopen der objete habe ich folgendes zusammen geschrieben.
es loopt aber nicht und leider wird der Aufbau der Seite extrem langsam.

woran liegt das?
wie muss der code ausehen um es zu optimieren? muss ich da speichermäßig was beachten?

1. function start_wolken() {
2.  
3. $(".wolke-1").stop().css({ left: -100 + "px" });
4. $(".wolke-2").stop().css({ left: -200 + "px" });
5. setTimeout(function() {
6. $(".wolke-1").animate({ left: 1020 + "px" }, 10000);
7. }, 50);
8.  
9. setTimeout(function() {
10. $(".wolke-2").animate({ left: 1020 + "px" }, 10000);
11. }, 50);
12.  
13. start_wolken();
14.  
15. }

Quelltext in Zwischenablage kopieren

1. $(document).ready(function() {
2.  
3. start_wolken();
4.  
5. });

Quelltext in Zwischenablage kopieren

1. <div id="intro">
2. <div class="wolke-2"></div>
3. <div class="wolke-1"></div>
4. <div class="regenwolke"></div>
5.  
6. <div class="wiese-2"></div>
7. <div class="wiese-3"></div>
8. <div class="wiese-4"></div>
9. <div class="wiese-1"></div>
10. <div class="erde"></div>
11.  
12. <div class="pflanze0-oben"></div>
13. <div class="pflanze0-unten"></div>
14. <div class="pflanze1-oben"></div>
15. <div class="pflanze1-unten"></div>
16. <div class="pflanze2-oben"></div>
17. <div class="pflanze2-unten"></div>
18. <div class="pflanze3-oben"></div>
19. <div class="pflanze3-unten"></div>
20. <div class="pflanze4-oben"></div>
21. <div class="pflanze4-unten"></div>
22.  
23. <div class="glas"></div>
24. <div class="maedchen"></div>
25. <div class="junge"></div>
26. <div class="kaefer-boden"></div>
27. <div class="kaefer"></div>
28. <div class="regenwurm"></div>
29. <div class="fische1"></div>
30. <div class="fische2"></div>
31. </div>

Quelltext in Zwischenablage kopieren

Schon mal bei Zalando, Amazon oder eBay geguckt? Vielleicht wirst du dort fündig.

was du suchst ist setIntervall()

habe mal ein Beispiel gemacht:

http://jsfiddle.net/ZKz7F/3

Danke. Super.
ich brauchte nur einen Loop in eine Richtung. deshalb habe ich das einfach angepasst.

=> ich habe da jetzt ja einige zahlen an denen man drehen kann.

um das »ruckeln« zu minimieren und eine gleichmäßiger Bewegung zu bekommen.

wofür stehen die steps? die Zahl hinter dem div-selektor sind die Teile der Steps oder?
und 50 ist die Geschwindigkeit?
ist das richtig?

1. $(document).ready(function(){
2.  
3. setInterval( function() {
4. moveLayer( $('.wolke-1'), 5),
5. moveLayer( $('.wolke-2'), 2 )
6. }, 50 );
7.  
8.  
9. });
10.  
11. function moveLayer($e, step){
12. var step=step||10,
13. left = $e.css('left').replace('px','');
14.  
15. if( left >= 1024 )
16. {
17. $e.css('left', '0');
18. }
19. if( $e.data('direction') == 'l' )
20. {
21. $e.css( 'left', '-='+step );
22. }
23. else
24. {
25. $e.css( 'left', '+='+step );
26. }
27. }
28.  
29. });

Quelltext in Zwischenablage kopieren

step ist die Schrittweite, also um wie viele Pixel sich das Element pro Durchlauf bewegt. Je kleiner die Zahl, desto flüssiger.
50 ist die Zeit in ms in der die Funktion von setIntervall() geloopt wird.