使用 SwapSource 悬停时的 Jquery FadeIn 图像答案

【问题标题】：Jquery FadeIn image on hover with SwapSource使用 SwapSource 悬停时的 Jquery FadeIn 图像
【发布时间】：2017-10-31 23:31:58
【问题描述】：

我想在第二张图片上做一个淡入淡出，但不知道在哪里写函数

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.xyz').hover(sourceSwap, sourceSwap);
}) ;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="img/map.jpg" src="img/colourmap.jpg" width="95%" />

【问题讨论】：

Animating "src" attribute的可能重复

标签： jquery html image fadein swap

【解决方案1】：

试试这个

$('.xyz').fadeIn(1500).delay(0).fadeOut(1500);
    $('.xyz').delay(1000).fadeIn(1500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="img/map.jpg" src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" width="50%" />

【讨论】：