使用jQuery在hover/out上展开/收缩div

Question

我正在寻找一个jQuery插件来扩展div元素,以便在悬停时显示它们的溢出(如果有的话).插图:

该插件应该在相对定位div的(我猜想暗示你创建一个副本div,将其定位设置为绝对,然后找出放置它的位置).

那里有这样的插件吗？

Answer 1

你不需要插件.只需添加适当的CSS并使用jQuery animate:

$div
.on('mouseenter', function(){
    $(this).animate({ margin: -10, width: "+=20", height: "+=20" });
})
.on('mouseleave', function(){
    $(this).animate({ margin: 0, width: "-=20", height: "-=20" });
})?

在这里演示

Answer 2

这里的图像不见了......但是几年前我就是这样做的.基本理论是所有的图像/ div都是绝对的,在它们自己的相对区域内.然后我给这个left & top位置制作动画-negatively.这使它们突出于周围的盒子上方,看起来像是弹出的.(当然你还需要确保这个的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; 
}