如何向这个 JQuery 图像交换添加一个简单的淡入淡出动画？答案

【问题标题】：How do I add a simple fade animation to this JQuery image swap?如何向这个 JQuery 图像交换添加一个简单的淡入淡出动画？
【发布时间】：2019-12-02 03:55:28
【问题描述】：

我有以下结构和 JQuery 函数（基于this）：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" data-alt-src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

我将如何为它添加一个简单的淡入淡出动画？目前只是一个瞬间过渡

【问题讨论】：

标签： jquery jquery-hover

【解决方案1】：

使用.fadeTo()在图像源更改时生效。根据您的要求增加或减少数量。

var sourceSwap = function() {
  var $this = $(this);
  var newSource = $this.data('alt-src');
  $this.data('alt-src', $this.attr('src'));
  $this.fadeTo(1000, 0.15, function() {
    $this.attr("src", newSource);
  }).fadeTo(200, 1);
}

$(function() {
  $('img[data-alt-src]').each(function() {
    new Image().src = $(this).data('alt-src');
  }).hover(sourceSwap, sourceSwap);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

【讨论】：

【解决方案2】：

您可以使用CSS 执行以下操作

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cf">
<img class="bottom" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

<img  class="top" src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" >
</div>

【讨论】：

这些图像可能有不同的尺寸，但不幸的是，我认为我不能像那样将它们放在一起。