使用jQuery展开/缩小div

这些图像在这里丢失了…但是这是几年前我把它拉下来的。基本理论是，所有的图像/ div都是绝对的，在自己的相对区域内。然后我动画左边和最重要的位置都是阴性的。这使它们突出在周围的盒子之上，看起来就像是弹出。 (当然你也需要确保这个的z-index比周围的z-index更高)。

jsFiddle DEMO

$(".img a img").hover(function() {
    $(this).closest(".img").css("z-index",1);

    // this is where the popping out effect happens
    $(this).animate({ height: "200",width: "200",left: "-=55",top: "-=55" },"fast");

},function() {
    $(this).closest(".img").css("z-index",0);
    $(this).animate({ height: "90",width: "90",left: "+=55",top: "+=55" },"fast");
});​

我对这两件事情的风格是：

.img { 
   position:relative; 
   z-index:0px;  
}

.img a img { 
   position:absolute;
   border:1px #1b346c solid; 
   BACkground:#f1f1f1; 
   width:90px; 
   height:90px; 
}