jQuery image swap using animate, swaps image after fade back in -

i'm trying image fade out on hover, swap image src, fade in. i'm animating opacity fadein/out functions set element display:none , don't want happen.

here's code:

$('.imgswap').on({ 'mouseenter': function(){     var $nextimg = $(this).data('imagesource');         if ($nextimg != $('#floorplan').attr('src')) {         $('#floorplan').animate({"opacity": "0"}, "fast",function () {             $('#floorplan').attr('src',$nextimg).animate({"opacity": "1"}, "fast");         });     } } }); 

can see why second animate function not firing off after setting source?

update: after further testing, , trying 1 of comments below, turns out animate firing after src has been set, if new image hasn't loaded in yet, old image stays visible until new 1 available. so... think need sort of 'loader' fires animate({"opacity": "1"}, "fast") when new image has been loaded in.

here dom used js above , works great:

<div class="imgswap" data-imagesource="http://placehold.it/350x450">   <img id="floorplan" src="http://placehold.it/350x150"/> </div> 

codepen: http://codepen.io/anon/pen/cgkaf

to address loading concerns, i've updated codepen see if it's loaded. try out. also, check out jquery callback on image load (even when image cached) , handy plugin: https://github.com/desandro/imagesloaded