将Fadein Fadeout添加到图像交换函数

我正在尝试淡入和淡入淡出图像和gif之间的转换，因为它们已交换。我试着用不透明的CSS3过渡，但它将GIF淡化为无。我曾尝试使用fadeIn（）jQuery函数，但我没有成功。有人可以帮助/指向正确的方向吗？将Fadein Fadeout添加到图像交换函数

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

谢谢！

来源

2017-07-19 user2647510

你还需要咨询的吗？ – Axel

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

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

悬停，过渡透明度上当前可见IMG为0而当前隐藏IMG的好处转变为1

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

img { transition: opacity 1s;}

稍微简单的例子是在这里：(updated your fiddle)

来源

2017-07-19 08:38:35 hairmot

将Fadein Fadeout添加到图像交换函数

回答

相关问题