将 Fadein Fadeout 添加到图像交换功能答案

【问题标题】：Adding Fadein Fadeout to Image Swap Function将 Fadein Fadeout 添加到图像交换功能
【发布时间】：2017-07-19 08:30:11
【问题描述】：

我正在尝试淡入和淡出图像和 gif 之间的过渡，因为它们被交换。我曾尝试使用具有不透明度的 CSS3 过渡，但它会将 gif 淡化为无。我尝试过使用fadeIn() jQuery 函数，但没有成功。有人可以帮助/指出正确的方向吗？

fiddle

代码：

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

谢谢！

【问题讨论】：

您还需要这方面的建议吗？

标签： javascript jquery html css

【解决方案1】：

您不能在源更改之间淡入淡出。

您需要做的是创建两个 img 元素（位置相同）并隐藏一个。

悬停时，将当前可见的图像上的不透明度转换为 0，同时将当前隐藏的图像转换为 1。

这种方法的好处是它都可以用 CSS 来完成。我保留了您的 $.each 函数以在示例中创建额外的 img 元素，但如果是我，我会将额外的 img 添加到您的 html 中，并纯粹使用 CSS 来完成。

img { transition: opacity 1s;}

这里有一个稍微简化的例子：(updated your fiddle)

【讨论】：