javascript - 希望在模糊 div 上建立悬停/合同扩展

Question

嘿大家，我已经在搜索引擎墙上打了几个小时的头，我想我不妨问问......

我需要构建一个在模糊时为一种尺寸的 div，例如 300x30，在悬停时扩展为 300x300，并将其下方的所有内容向下推，并在模糊时恢复为 300x30 尺寸（“不再悬停”或任何你的孩子在打电话它现在 - 一天大声笑）再次。有人可以向我指出一些资源，甚至可以给我一些代码位吗？将不胜感激！

Answer 1

如果您不想要动画，可以在 CSS 中使用 Psuedo-classes。

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

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

现场示例

http://jsfiddle.net/aFUmS/

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

jQuery 示例，如果你想要动画

http://jsfiddle.net/CvhkM/

Answer 2

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

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

Answer 3

如果您向罗伯特的答案添加过渡，则它是纯 CSS 的，并且您也会获得动画：

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

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