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

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

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

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()之前添加.stop() ，并在删除指针后立即停止动画。

 $('.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必须是静态高度。