Question

嘿所有人，我现在已经在搜索引擎墙上敲了几个小时了，现在我想也可以问......

我需要构建一个模糊的一个div，比如300x30，在悬停时扩展到300x300并将其下面的所有内容推下来，并在模糊时恢复到300x30大小（“不再徘徊”或任何你孩子们现在又叫它了一天。有人能指点我一些资源，甚至可以给我一些代码吗？非常感谢！

Answer 1

如果您不想要动画，可以在CSS中使用伪类。实例

http://jsfiddle.net/aFUmS/

div.div {
   height: 30px;
   width: 300px;
   border: 1px solid black;
}

div.div:hover {
   height: 300px;
}

jQuery示例，如果你想要动画

http://jsfiddle.net/CvhkM/

Answer 2

或者您可以在.stop()之前添加.animate，并且在删除指针后动画将立即停止。

$('.div').hover(function() {
    $(this).stop().animate({
        height: '300px'
    }, 300);
},function() {
    $(this).stop().animate({
        height: '30px'
    }, 300);
});

Answer 3

如果您向Robert的答案添加过渡，那么它只有CSS，您也可以获得动画：

将此添加到div（而不是div：hover）： transition: height 0.5s ease-in;

我刚刚在网站上实现了这一点，它甚至适用于移动设备。但是，在折叠和展开时，div必须是静态高度。

希望在模糊div上构建悬停/合约的扩展

3 个答案:

jQuery示例，如果你想要动画