I am working on a feature where a series of images change when hovered over, with a div animating as an overlay on the image. Here is the code snippet:
// hiding overlays initially
$(".mini-shop .item .image a div").hide();
// toggling overlay and second image on hover
$(".mini-shop .item .image").hover(
function() {
$img = $(this).find('a img');
$img.stop().hide();
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '80%'
}, 300).css('display', 'block');
},
function() {
$img = $(this).find('a img');
$img.stop().fadeOut(100);
var src = $img.attr('src');
$img.attr('src', $img.attr('data-csrc'));
$img.stop().fadeIn(300);
$img.attr('data-csrc', src);
$(this).find('a div').stop().animate({
'top': '100%'
}, 300).css('display', 'none');
}
);
However, I am currently facing an issue where only the effects in the mouseenter function seem to work properly. When I try to leave the image, the overlay disappears immediately without the fade effect. Can anyone help identify what might be causing this problem in my code?