使用 Jquery 对图像更改（添加/删除类）的过渡效果

Question

我需要帮助在 div 框上悬停/退出的简单过渡效果，以将第一张图像

.image-main

更改为第二张

image-hover

。 它现在工作正常，但我不知道如何添加 mouseOn/mouseOut 效果（简单的不透明度淡出就足够了）。

我想使用 JS，因为在这个特性中我想添加一些额外的动作。 CSS 悬停效果也破坏了

.img-fluid

activity.

HTML：

<div class="col-6">

  <div class="product-box">
    <div class="product-box__image">
      <img class="img-fluid image-main" src="https://dummyimage.com/400x200/000/fff">
      <img class="img-fluid image-hover" src="https://dummyimage.com/400x200/00cc00/fff">
    </div>
    <div class="product-box__content">
      <p class="text-center p-3">
        hello description<br>on hover - change image too
      </p>
    </div>
  </div>

</div>

JS:

$('.product-box').hover(
  function() {
    var main = $(this).find('.image-main');
    var second = $(this).find('.image-hover');
    main.removeClass('image-main');
    main.addClass('image-hover');
    second.addClass('image-main');
    second.removeClass('image-hover');

  },
  function() {
    var second = $(this).find('.image-main');
    var main = $(this).find('.image-hover');
    second.removeClass('image-main');
    second.addClass('image-hover');
    main.addClass('image-main');
    main.removeClass('image-hover');
  }
);

CSS：

    .product-box {
      border: 1px solid gray;
    }

    .image-hover {
      display: none;
    }

https://jsfiddle.net/qsyr1te7/2/

Answer 1

只需将第一张图片设置为完全不透明，并给它一个不透明过渡。

.image-main {
  transition: opacity .5s;
  opacity: 1;
}

然后您可以将不透明度设置为 0

.hovering

.

.hovering {
  opacity: 0;
}

现在您可以简单地向第一张图片添加或删除悬停类。

$('.product-box').hover(
  function() {
    var main = $(this).find('.image-main');
    main.addClass('hovering');
  },
  function() {
    var main = $(this).find('.image-hover');
    main.removeClass('hovering');
  }
);

希望这就是你想要的。干杯！