jquery - 使列表的元素在视觉上重叠

Question

我有一个图像列表（ul），连续 3 个（看起来像 Metro UI）。我想用 jQuery 为这些图像设置动画，即在悬停时调整它们的大小。问题在于，当图像调整大小（缩放）时，其他元素会移动以为缩放元素腾出空间，从而弄乱整个设计。

我想要做的是使悬停的元素与其他图像重叠。我怀疑我可以通过操纵它的 CSS 位置属性来实现这一点，我尝试了，但我似乎无法找到或找出正确的解决方案。

我正在使用 hoverIntent 来调用悬停操作。

用于放大图像的代码。

$(document).ready(function() {
$(".entry-img").hoverIntent(tall,short);
function tall(){
$(this).animate({"height":300},500);
// code for making the image overlap
}
function short(){
$(this).animate({"height":200},500);
// remove the "overlap property"
}
});

Answer 1

尝试将功能更改为：

function tall(){
   $(this).parent().css('position', 'absolute').css('z-index','10').animate({"height":300},500);
}
function short(){
   $(this).parent().css('position','relative').css('z-index','1').animate({"height":200},500);
}