將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添加到圖像交換函數

回答

相關問題