Stop jquery animation

Question

I am having a problem with jquery animation. My code is as follows:

 if((valorscrollpx >= 800) && (valorscrollpx <= 1700))
  {
      $('#loquehacebien').fadeIn(600);
      $('#loquehacebien_estrella').animate({left: '-=500', top: '+=80'}, 1800);
  }
  else
  {
    $('#loquehacebien').fadeOut(600);
  }

The problem is that I don't know how to stop this animation! When the scroll reaches 800 px animation begins and ends, but every time I move the scroll animation starts again from the point it was. What can i do?. I just need the animation begins and ends 1 time alone.

Thanks!

Answer 1

if you need to animate the star just one time, you can use a flag like that :

put

var flag = false; 

outside $(window).scroll(...);

and replace your code by

if((valorscrollpx >= 800) && (valorscrollpx <= 1700) && !flag)   {
       $('#loquehacebien').fadeIn(600);       
       $('#loquehacebien_estrella').animate({left: '-=500', top: '+=80'}, 1800);
       flag = true;   
}   else   {     
       $('#loquehacebien').fadeOut(600);   
}