title: How to speedup jQuery replace image on hover
body: <p>I wrote a code to change the images on a hover. </p>
  
  <p>The problem is that when the mouse moves fast from one "item" to another, it messes up images. </p>
  
  <p>How to fix that?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="items"&gt;
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
              &lt;img src="img/icon1.png" data-original="img/icon1.png" data-hover="img/icon1-hover.png"&gt;
              &lt;span&gt;Title&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="item"&gt;
          &lt;a href="#"&gt;
              &lt;img src="img/icon2.png" data-original="img/icon2.png" data-hover="img/icon2-hover.png"&gt;
              &lt;span&gt;Title&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.items .item a').hover(function(){
  newsrc = $(this).children('img').data("hover");
  $(this).children('img').fadeOut(100, function() {
      $(this).attr('src', newsrc).fadeIn();
  }); 
  }, function(){
      oldsrc = $(this).children('img').data("original");
      $(this).children('img').fadeOut(100, function() {
          $(this).attr('src', oldsrc).fadeIn();
      });
  });
  </code></pre>