image swapping two

by renevilla23

HTML

<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/FORD-SUPER-BOWL.jpg" data-alt-src="http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif"/>
</figure>
<figure>
  <img src="http://reneinla.com/tasha-goldthwait/style/images/stills/OPERATOR.jpg" data-alt-src="http://reneinla.com/tasha-goldthwait/style/images/gifs/giphy.gif"/>
</figure>

CSS

figure img{
  width: 50%;
  height: auto;
  float:left;
  margin: 10px;
}

JavaScript

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');
        }).fadeIn().hover(sourceSwap, sourceSwap);
    });