javascript - 淡入淡出时交换图像

我正在尝试用淡入/淡出效果在悬停时交换图像。下面的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);
});

Codepen：

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

最佳答案

您要在过渡之前替换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>

关于javascript - 淡入淡出时交换图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34957221/