Question

我编写了以下代码，它改变了图像源，并在更改图像源时尝试了一个漂亮的淡出和淡化，但它并不完美，我有点陷入使其平滑。

我面临的问题是：

图像变化之间的淡化是混乱的，应该淡出，改变图像并淡化新的图像但目前似乎并非如此
如果你进出几次，它会不断重复悬停/进出功能;这只能发生一次吗？

请注意，第一张图片处于有效状态，因此无需悬停，因此请将其他图片悬停以查看我的含义。

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>

Answer 2

考虑使用mouseenter事件作为替代方案。

另一个＆＃34;技巧＆＃34;是使用finish()函数来停止mouseleave

上当前正在运行的动画

此处JSFiddle为完整解决方案

Answer 3

要停止重复，您需要使用jQuery stop()。看看这个答案：https://stackoverflow.com/a/9113598/9453736

对于淡入的动画更改图像，我建议你这样做：使用临时图像，我的意思是第一张图像的重复图像，并将副本放在那里的图像上。

然后将原始图像的src更改为新图像，并隐藏不在临时图像后面的原始图像，到目前为止看不到任何更改。

然后你做两个动画。淡出顶部的临时图像并淡化原始图像。然后删除临时图像。

如果您无法理解我的想法，或者遇到麻烦，请告诉我

更改图像src时，jQuery会进入淡出过渡状态

3 个答案: