Having an issue with my product images. There are two stacked images and upon hovering, the top one fades out to reveal the bottom image. However, I noticed that if you repeatedly move your mouse over it like twenty times, the animation continues until all cycles are complete. Is there a way to make it stop after just one cycle?
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>