如何使淡入/淡出僅發生一次

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>