stopping a loop animation

stopping a loop animation

Hi, 

I'm having trouble figuring out how to apply stop() to a function which cycles an animation.

The animation changes the background by fading in, pausing, and fading out a background div.
For smooth effect the animation needs to stop on completion of the fade out.

To get the animation to cycle, I've used straight  javascript.  
 

  1. function breatheIn() {
  2. $('#bg1').animate({opacity:"0.9"}, 6400);
  3. }
  4. function breatheOut() {
  5.   $('#bg1').animate({opacity:"0.0"}, 6400);
  6.   }

  8. function breathe() {
  9. {
  10. breatheIn(); 
  11. setTimeout('breatheOut()',9600); // effectively 3200 ms pause
  12. }
  13. setTimeout( function() { breathe() }, 19200);
  14. }
 

Maybe stopping also needs a straight js solution, but I can't see how to apply clearTimeout() to  the completion of a cycle.

I'd really appreciate some help with this one! 


cheers