更改图像src时jQuery悬停在淡入淡出过渡

Question

I have coded the following which changes the image source and does some attempt of a nice fadeout and fadein when changing the image source but it is not perfect and trying to make it smooth.

The issues I'm facing are:

1. The fading between image changes are messy, should fadeout, change image and fade new one back in but at the moment it seems not the case
2. If you hover in and out a few times it keeps repeating the hover in / out functions; can this only happen once?

Note the first image has active status so no hover required, so please hover the other images to see what I mean.

 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

Here's a working example

 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

Consider using the mouseenter event as an alternative.

The other "trick" is to use the finish() function to stop the currently running animation on mouseleave

Herewith the JSFiddle as a complete solution

Answer 3

For stop repeating you need to use jQuery stop() . Check out this answer: https://stackoverflow.com/a/9113598/9453736

For the animation change image with fade in and our I suggest you do this: use a temporary image, I mean a duplicate image of first image and put that duplicate on top of the image that was there.

Then you change the original image's src to new image, and hide the original image which is not behind the temporary image so far no change is seen.

Then you do two animations. Fade out the temporary image which is on top and fade in the original image which was on back. Then you remove the temporary image.

If you had trouble understanding my idea, or have troubles implementing it, let me know