除非您需要更改宽度和高度,否则您应该只设置一次,假设两个图像的大小相同,这应该可以工作
var h=$(".extend").height();
var w=$(".extend").width();
$(".extend").hover(function() {
//alert(h);
$(this).css({'z-index' : '999' });
$(this).addClass("hover").filter(":not(:animated)").stop()
.animate({
marginTop: '-110px',
marginLeft: '10px',
top: '80%',
left: '80%',
width: 387,
height: 487,
padding: '0px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width:w,
height:h,
padding: '0px'
}, 400);
});
小提琴
编辑——
对于不同尺寸的图像,使用 .data() 将它们保存在元素中
$(".extend").each(function(){
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
})
$(".extend").hover(function() {
//alert(h);
$(this).css({'z-index' : '999' });
$(this).addClass("hover").filter(":not(:animated)").stop()
.animate({
marginTop: '-110px',
marginLeft: '10px',
top: '80%',
left: '80%',
width: 387,
height: 487,
padding: '0px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width:$(this).data('width'),
height:$(this).data('height'),
padding: '0px'
}, 400);
});
小提琴
EDIT-2-
解决移位问题的一种简单方法是将 img 标签包装在 inline-block 元素中,将元素尺寸设置为图像的尺寸,然后使 img 绝对定位
<span><img class="extend" src="a.jpg"></span>
<span><img class="extend" src="b.jpg"></span>
$(".extend").each(function(){
$(this).data('width', $(this).width());
$(this).data('height', $(this).height());
$(this).parent().css({display:'inline-block', width: $(this).width(), height: $(this).height()})
.end().css({position:'absolute'});
})
$(".extend").hover(function() {
//alert(h);
$(this).css({'z-index' : '999' });
$(this).addClass("hover").filter(":not(:animated)").stop()
.animate({
marginTop: '-110px',
marginLeft: '10px',
top: '80%',
left: '80%',
width: 387,
height: 487,
padding: '0px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width:$(this).data('width'),
height:$(this).data('height'),
padding: '0px'
}, 400);
});
小提琴