title: Animating with jQuery using swipe
body: <p>Hi I have a problem moving a div of slides when swiping left and right. I'm using:</p>
  
  <pre><code>$("#slidetrack").on("swipeleft",function(){
      $("#slidetrack").animate({
          "margin-left": "-=800px" //go left
   }, {duration: 1600, easing: "easeOutExpo", queue: false});
  
  $("#slidetrack").on("swiperight",function(){
      $("#slidetrack").animate({
          "margin-left": "+=800px" //go right
   }, {duration: 1600, easing: "easeOutExpo", queue: false});
  </code></pre>
  
  <p>This works ok but the problem I have occurs when the user swipes again too quickly. Let's say the user swipes twice in quick succession, the second swipe occurs only 400 pixels into the 800px animation of the first swipe, the total number of pixels the panel track should have moved is 1600 however in this instance it will only have moved 400+800=1200px.</p>
  
  <p>I've tried using is(':animated') to check if the animation is still occurring and therefore prevent another animation:</p>
  
  <pre><code>        if ($("#slidetrack").is(':animated')) {
  
            return false;
  
          };
  </code></pre>
  
  <p>and this does work to a degree but it isn't suitable as the user may want to swipe quickly through the slides and cannot do so with this method.</p>
  
  <p>So is there a better way?</p>
  
  <p>Thanks in advance</p>