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);
}

使视图元素在视觉上重叠

1 个答案: