javascript - 更改图像 src 时 jQuery 悬停进出淡入淡出过渡

Question

我编写了以下代码，它改变了图像源，并在改变图像源时做了一些漂亮的淡出和淡入尝试，但它并不完美，并试图让它变得平滑。

我面临的问题是:

1. 图像变化之间的淡入淡出是困惑的，应该淡出，改变图像并淡出新的图像，但目前看来并非如此
2. 如果您将鼠标悬停进出几次，它会不断重复悬停进/出功能；这只能发生一次吗？

请注意，第一张图片处于事件状态，因此无需悬停，因此请悬停其他图片以了解我的意思。

var $profile = $(".influencers-block-profiles");
var $profileLink = $profile.find("a");
var $activeProfile = $profileLink.hasClass("active");
var imageHoverName = "-hover.jpg";
var imageColourName = "-colour.jpg";

$($profile).find("img").hover(function() {
  $activeProfile = $(this).closest("a").hasClass("active");
  if (!$activeProfile) {
    var src = $(this).attr('src').replace(imageColourName, imageHoverName);
    $(this).not('[src=' + src + ']').fadeOut(500, 0).attr('src', src).fadeIn(500);
  }
  return false
}, function() {
  $activeProfile = $(this).closest("a").hasClass("active");
  if (!$activeProfile) {
    var src = $(this).attr('src').replace(imageHoverName, imageColourName);
    $(this).not('[src=' + src + ']').fadeOut(500, 0).attr('src', src).fadeIn(500);
  }
  return false
});

.influencers-block-profiles img {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="influencers-block-profiles">
  <a href="#" class="active">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-hover.jpg" />
  </a>
  <a href="#">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-colour.jpg" />
  </a>
  <a href="#">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-colour.jpg" />
  </a>
</div>

Answer 1

这是一个工作示例

var $profile = $(".influencers-block-profiles");
var $profileLink = $profile.find("a");
var $activeProfile = $profileLink.hasClass("active");
var imageHoverName = "-hover.jpg";
var imageColourName = "-colour.jpg";
var TRANSITION_DURATION = 500, inTimeout;

$profile.find("img").hover(function() {
  $activeProfile = $(this).closest("a").hasClass("active");
  if (!$activeProfile) {
    var src = $(this).attr('src').replace(imageColourName, imageHoverName);
    var self = this;
    clearTimeout(inTimeout);
    this.style.opacity = 0;
    inTimout = setTimeout(function(){
      self.src = src;
      self.style.opacity = 1
    }, TRANSITION_DURATION )
  }
  return false
}, function() {
  $activeProfile = $(this).closest("a").hasClass("active");
  if (!$activeProfile) {
    var src = $(this).attr('src').replace(imageHoverName, imageColourName);
    var self = this;
    clearTimeout(inTimeout);
    this.style.opacity = 0;
    inTimout = setTimeout(function(){
      self.src = src;
      self.style.opacity = 1
    }, TRANSITION_DURATION )
  }
  return false
});

.influencers-block-profiles img {
  transition: opacity 0.5s ease;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="influencers-block-profiles">
  <a href="#" class="active">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-hover.jpg" />
  </a>
  <a href="#">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-colour.jpg" />
  </a>
  <a href="#">
    <img src="https://www.hostandname.co.uk/clients/tests/images/test-photo-colour.jpg" />
  </a>
</div>