How to run .animate jquery loop

Question

I work with one div with an image inside. I need the animation to scroll to the right of the page, and then return to the right and continue in the loop. I looked through a lot of posts here, but the script cannot work fine.

'$(document).ready(function(){ function loop() { $('#clouds').animate({left: '+=1400',},50000, 'linear', function(){ loop(); }); 

HTML

 < div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div> 

CSS

 #clouds { position:absolute; z-index:500; right:0px; top:10px; } 

Answer 1

Try the following:

JSFiddle http://jsfiddle.net/2YqH2/

You do not move the clouds back to the right. Inside the loop function, I added

 $('#clouds').css({right:0}); 

and the cycle will continue from there. I also changed your animation to animate the "right" property, since you said you want the clouds to move from right to left.

Also, your javascript was not well formed. Make sure you close brackets and brackets! Here's the fixed javascript.

 $(document).ready(function() { function loop() { $('#clouds').css({right:0}); $('#clouds').animate ({ right: '+=1400', }, 5000, 'linear', function() { loop(); }); } loop(); }); 

Answer 2

JAVASCRIPT:

 $(document).ready(function() { $('#clouds').click(function() { loop(); }); function loop(){ alert('a'); $('#clouds').animate({ opacity: 0.25, left: '+=1400', height: 'toggle' }, 5000, 'linear', function() { loop(); }); } }); 

HTML:

 <div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div> 

Your mistake is that you never call a function loop. look how it works, you can remove alert('a') because it is just a flag to know that the cycle is starting. now you need to do the reverse movement (e.g. reset div to start the loop cycle).

Answer 3

To add some information to others, if you are not going to use animate() , you should use some setTimeout() to prevent Uncaught RangeError: Maximum call stack size exceeded error

Example ( Using jQuery ):

.js

 function looping() { $('.loader').fadeOut(1000); $('.loader').fadeIn(1000); setTimeout(function(){ looping(); }, 10); } 

.html

 <div class='loader'>Loading...</div>