如何使淡入/淡出仅发生一次

Question

我的产品图片存在问题。我有2张图像堆叠在一起，当它悬停时，它会从顶部淡出并显示底部。这很好用，但我发现了一个小问题。如果您反复将鼠标移动20次，动画将继续发生，直到所有周期完成。如何阻止它只执行一次？

jQuery(function($) {
  $('.product a.product-image .primary-img').hover(function() {
    $(this).fadeTo(300, 0);
  }, function() {
    $(this).fadeTo(300, 1);
  });
});

.product a.product-image {
	position: relative;
	display: block;
}
.product a.product-image .primary-img {
	position: relative;
	z-index: 10;
}
.product a.product-image .secondary-img {
	position: absolute;
    left: 0;
	top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
  <a class="product-image" href="#">
    <img class="primary-img" src="http://d17ol771963kd3.cloudfront.net/148828/ma/r8-xsWDWKCM.jpg" alt="">
    <img class="secondary-img" src="http://d17ol771963kd3.cloudfront.net/148821/ma/f2xjw32B2U4.jpg" alt="">
  </a>
</div>

Answer 1

试试这个：

jQuery(function($) {
  $('.product a.product-image .primary-img').hover(function() {
    $(this).stop(true).fadeTo(300,0);
  }, function() {
    $(this).fadeTo(300,1);
  });
});

true是用于清除队列的标志。

.stop( [clearQueue ] [, jumpToEnd ] )

https://api.jquery.com/stop/

Answer 2

只需使用CSS在悬停时切换imgs不透明度

.product a.product-image {
  position: relative;
  display: inline-block;
}

a.product-image:hover .primary-img {
  opacity:0;
}

a.product-image:hover .secondary-img {
  opacity:1;
}

a.product-image .secondary-img {
	position: absolute;
  left: 0;	top: 0;
  opacity:0;
}

.primary-img, .secondary-img{
  transition:opacity 300ms;
}

<div class="product">
<a class="product-image" href="#">
<img class="primary-img" src="http://d17ol771963kd3.cloudfront.net/148828/ma/r8-xsWDWKCM.jpg" alt="">
<img class="secondary-img" src="http://d17ol771963kd3.cloudfront.net/148821/ma/f2xjw32B2U4.jpg" alt="">
</a>
</div>