title: Swap images with animation or delay on JS
body: <p>I've fond a fiddle: <a href="http://jsfiddle.net/17g6q8k0/2/" rel="nofollow">http://jsfiddle.net/17g6q8k0/2/</a></p>
  
  <pre><code>    &lt;img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png"
  src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /&gt;
  </code></pre>
  
  <p>and JS part</p>
  
  <pre><code>        var sourceSwap = function () {
              var $this = $(this);
              var newSource = $this.data('alt-src');
              $this.data('alt-src', $this.attr('src'));
              $this.attr('src', newSource);
          }
  
          $(function() {
              $('img[data-alt-src]').each(function() { 
                  new Image().src = $(this).data('alt-src'); 
              }).hover(sourceSwap, sourceSwap); 
          });
  </code></pre>
  
  <p>When you move mouse on image it's changing. When you remove mouse - it's changing back as it was.</p>
  
  <p>In current example it changes momentally.</p>
  
  <p>How to add pause or animate it (animation better)?</p>
  
  <p>This images have same size. But i'll use it with images which have differ sizes (like [f] and [facebook] buttons on mousehover) and to make it more easy for eyes.</p>