javascript - 为图像交换功能添加淡入淡出

Question

我正在尝试在图像和 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);
    });

谢谢!

Answer 1

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

您需要做的是创建两个 img 元素(具有相同的位置)并隐藏一个。

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

这种方法的好处是可以全部用CSS来完成。我在示例中保留了你的 $.each 函数来创建额外的 img 元素，但如果是我的话，我会把额外的 img 添加到你的 html 中，并且完全使用 CSS 来完成。

img { transition: opacity 1s;}

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