У меня есть сетка изображений, когда мышь находится над любым изображением, увеличенная версия этого изображения становится наложением исходного изображения сетки с немного большей версией.
Наведение мыши работает отлично. но mouseout и mouseleave вызывают мгновенное исчезновение большего изображения. Кончилась мышь или нет.
function imageSize(img){
var theImage = new Image();
$(theImage).load(function() {
var imgwidth = this.width;
var imgheight = this.height;
var position = img.parent().position()
var index = img.parent().index();
///calculate top
var top = (position.top -((imgheight-img.height())/2));
var left = (position.left -((imgwidth-img.width())/2));
/// place image in img_pop
var clone;
clone = '<div class="pop_img clone'+index+'"></div>';
$(clone).insertAfter($('BODY'));
$('.pop_img.clone'+index+'').css({
'width' : img.width(),
'height' : img.height(),
'top' : position.top,
'left' : position.left,
'backgroundImage' : 'url('+theImage.src+')',
});
$('.pop_img.clone'+index+'').stop().animate({
'height' : imgheight,
'top' : top,
'width' : imgwidth,
'left' : left,
},300,'easeInOutQuad');
});
theImage.src = img.attr('src');
}
$('.am-wrapper img').live('mouseenter',function(){
imageSize($(this));
});
$('.am-wrapper img').live('mouseleave',function(){
thisIndex = $(this).parent().index();
$('.pop_img.clone'+thisIndex+'').fadeOut('200');
});
В идеале я хочу, чтобы наложенное изображение оставалось видимым и оставалось на месте, пока мышь находится над соответствующим изображением сетки. Когда пользователь наводит указатель мыши на другое изображение сетки, старое наложение исчезает.