在悬停时使用淡入淡出交换图像答案

【问题标题】：Swap images on hover with fade在悬停时使用淡入淡出交换图像
【发布时间】：2016-01-23 06:57:57
【问题描述】：

我正在尝试用淡入/淡出效果替换悬停时的图像。下面的 jQuery 运行良好，因为它延迟加载悬停图像。

第一个示例显示白色闪烁，因为原始图像在淡入时被新图像替换。第二个示例通过设置背景显示所需的淡入效果，但不知何故失去了淡出效果。

HTML：

<img class="imageHoverLoad lazy" 
  data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" 
  data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />

jQuery:

$('.imageHoverLoad').mouseenter(function() {
   var elem = $(this);
   elem.attr('src', elem.attr('data-hover')).hide().fadeIn(400);
});

$('.imageHoverLoad').mouseleave(function() {
   var elem = $(this);
   elem.attr('src', elem.attr('data-original')).hide().fadeIn(400);
});

代码笔：

http://codepen.io/anon/pen/KVQavM

【问题讨论】：

如果它运作良好有什么问题？
您是否尝试过使用第二种方法和 CSS 过渡来控制悬停状态而不是 jQuery？
@DinoMyte，仔细阅读问题，问题概述得很好。
@sean 我尝试过使用 CSS 过渡，但它同样失去了淡出效果。

标签： javascript jquery html css

【解决方案1】：

您将在转换前替换 src，因此没有时间淡出。您需要指定fadeOut 并等待动画承诺解决后再继续：

$(function() {
  $("img.lazy").lazyload();
});

$('.imageHoverLoad').mouseenter(function() {
  var elem = $(this);
  elem.fadeOut(400).promise().done(function() {
    elem.attr('src', elem.attr('data-hover')).fadeIn(400);
  });
});

$('.imageHoverLoad').mouseleave(function() {
  var elem = $(this);
  elem.fadeOut(400).promise().done(function() {
    elem.attr('src', elem.attr('data-original')).fadeIn(400);
  });
});

.swap-image {
  width: 300px;
  height: 300px;
  margin-bottom: 100px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>

<div class="swap-image">
  <img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>

<div class="swap-image" style="background: url(http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg) no-repeat;">
  <img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />
</div>

【讨论】：