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:
- 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
- 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>