Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74735

jQuery hover in and out fade transition when changing image src

$
0
0

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>

Viewing all articles
Browse latest Browse all 74735

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>