title: Prevent Double Animation in jQuery
body: <p>How  can I stop this function from happening twice when a user clicks too fast?</p>
  
  <pre><code>$(document).ready(function() {
      $(".jTscroller a").click(function(event) {
          event.preventDefault();
          var target = $(this).attr("href");
          $("#photo").fadeTo("fast", 0, function() {
              $("#photo").attr("src",target);
              $("#photo").load(function() {
                  $("#photo").fadeTo("fast", 1);
              });
          });
      });
  });
  </code></pre>
  
  <p>The issue I'm having is that if a user clicks too fast the element won't fade back in, it just stays hidden. </p>
  
  <p>The issue wasn't what I thought it was. When I was clicking on the same thumbnail it would try to load in the same image and stick loading forever. The <code>.stop()</code> answer does fix double animation so I'm accepting that answer, but my solution was to check if the last clicked item was the currently displayed item. New script:</p>
  
  <pre><code>$(document).ready(function() {
      $(".jTscroller a").click(function(event) {
          event.preventDefault();
          var last = $("#photo").attr("src");                 
          var target = $(this).attr("href");
          if (last != target) {
              $("#photo").stop().fadeTo("fast", 0, function() {
                  $("#photo").attr("src",target);
                  $("#photo").load(function() {
                      $("#photo").fadeTo("fast", 1);
                  });
              });
          };
      });
  });
  </code></pre>