I am working on a project where I need to implement a hover effect that fades in a second image above the initial image. The challenge is to ensure that the second image remains hidden initially and smoothly fades in without causing the initial image to fade out completely. I have experimented with various methods including using one image, two images, jQuery animate, and CSS transitions.
I have come across information suggesting that it is possible to animate changes in attributes using jQuery. If this is indeed true, I would like to know how I can animate the change of the 'src' attribute in an img element using jQuery.
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
The code snippet above is what I am currently using, which has brought me closest to achieving the desired outcome. However, there is still a slight flicker during the image change, which is not ideal.