Question

I made an animation with jQuery, everything is written correctly but it doesn’t work!!! DX Could anyone help me?

$(document).ready(function(){ 
 $('#cloud1').css({backgroundPosition: '0 -80px'});
 $('#cloud2').css({backgroundPosition: '0 -30px'});
  $('#cloud1').animate({backgroundPosition: '(-500px -80px)'}, 20000);
  $('#cloud2').animate({backgroundPosition: '(-625px -30px)'}, 20000);
});

Answer 1

You can see here what can jQuery do. Here is a simple (with fiew bugs to fix) game.
You can find in the code all the jQuery brutality you may need, and is full of loops and other things! Take a look:

http://roxon.in/scripts/particlesExplosionGame/

recommended browsers: Opera, Chrome (both have a great JS engine!)

Or if you want you can go through this easy tutorial of mine (has loops too! counters and all the fun jQuery stuff!) :

http://roxon.in/scripts/tutorials/NavGallery_jQuery_Tutorial_01/

---

But always … always go for reference to the jQuery official API pages. And Stack Overflow of course.

And take a look for ‘bounces’ (easings) , sliders and so on here: http://jqueryui.com/demos/

---

Here, I prepared to you a fun

DEMO loops animation with random positions and speed

I commented my code do help you understand!

Change the numbers, add more cars, have fun!

P.S. : to add more cars you’ll have to learn the jQuery .each() function method 😉 and try to implement it!

(Ok, just kidding – but it’s easy. look for your self! DEMO with multiple cars!)