jQuery: The 'body' element is activating the scroll event twice
<p>I've implemented an animation for my photo blog. I still have big problem because the 'body' element is activating the animation twice.</p>

<p>I think the problem stems from the $('body').animate. Because I think that when the body is animating, the scroll event would be activated again and thus triggering the event twice.</p>

<p>The problem of my code is scrolling the page up. When I scroll the page upwards. The scrollAnimatePrev will trigger and then $('body') element will animate itself. After the animation the animating variable is set to false. But the $('body') element triggers the scroll event because I guess when I set the scrollTop the scroll event is triggered. So once again currentPos is set to the $(window).scrollTop() then currentPos > previousPos returns true and !animating returns true so it will trigger the scrollAnimate.</p>

<p>Now I want to fix this. How?</p>

<pre><code>    $(function() {
     var record = 0;
     var imgHeight = $(".images").height();
     var offset = $(".images").eq(0).offset();
     var offsetHeight = offset.top;
     var previousPos = $(window).scrollTop();
     var animating = false;
     var state = 0;
     $(window).scroll(function() {
      var currentPos = $(window).scrollTop();
      console.log(currentPos);
      if(currentPos &gt; previousPos &amp;&amp; !animating) {
       record++;
       scrollAnimate(record, imgHeight, offsetHeight);
       animating = true;
      } else if (currentPos &lt; previousPos &amp;&amp; !animating) {
       record--
       scrollAnimatePrev(record, imgHeight, offsetHeight);
       animating = true;
      }
      previousPos = currentPos;
      console.log(previousPos)
     })


     function scrollAnimate(record, imgHeight, offsetHeight) {
      $('body').animate(
       {scrollTop: (parseInt(offsetHeight) * (record+1)) + (parseInt(imgHeight) * record)},
       1000,
       "easeInOutQuart"     
      )
      .animate(
       {scrollTop: (parseInt(offsetHeight) * (record)) + (parseInt(imgHeight) * (record))},
       1000,
       "easeOutBounce",
       function() {
        animating = false;
       }
      )
     }

     function scrollAnimatePrev(record, imgHeight, offsetHeight) {
      $('body').animate(
       {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record)) - offsetHeight},
       1000,
       "easeInOutQuart"
      )
      .animate(
       {scrollTop: ((parseInt(imgHeight) * record) + (parseInt(offsetHeight) * record))},
       1000,
       "easeOutBounce",
       function() {
        animating = false;
       }
      )
     }
    })
</code></pre>
