在图像交换功能中添加淡入淡出效果

Question

Im am trying to fade in and fade out a transition between an image and a gif as they are swapped. I have tried using CSS3 transition with opacity, but it fades the gif to nothing. I have tried using the fadeIn() jQuery function, but I haven't been successful. Can someone help/point me in the right direction?

fiddle

code:

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

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);
    });

Thanks!

Answer 1

You cannot fade between source changes.

What you would need to do is create two img elements (with the same position) and hide one.

On hover, transition the opacity on the currently visible img to 0 whilst transitioning the currently hidden img to 1.

The benefit to this method is that it can all be done with CSS. I've kept your $.each function to create the additional img elements to in the example but if it were me i'd add the extra img to your html and do this purely with CSS.

img { transition: opacity 1s;}

A slightly simplified example is here: (updated your fiddle)