Question

我正在尝试淡入并淡出图像和gif之间的转换。我尝试过使用不透明度的CSS3过渡，但它将gif淡化为空。我尝试过使用fadeIn（）jQuery函数，但我还没有成功。有人可以帮助/指出我正确的方向吗？

代码：

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)

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

1 个答案: