Jquery：向上展开Div

Question

好的，我有一个高度为50px的div，宽度不重要，上面有一个标题。我想使用jquery，在鼠标悬停在div上时，向上扩展到70px以显示标题下隐藏的内容。

<div id="box">
<h1>Title Goes Here</h1>
<p>this is the hidden text</p>
</div>

- Louis Stephens

---

在HTML中，内容通常向下流动。您确定要使div向上扩展吗？ - Yi Jiang

Answer 1

这段代码可以解决问题：

$(function() {
    $("#box").hover(function() {
        $("#box").animate({'height': '70px', 'top': "-20px"});
    }, function() {
        $("#box").animate({'height': '50px', 'top': "0px"});
    });
});

Here's a live demo: http://jsfiddle.net/MeBxJ/

- Ender

Answer 2

$("#box").hover(function(){
    $("#box").css('height','70px');
}, function(){
    $("#box").css('height','50px');
});

编辑：我刚明白你想要向上扩展。如果你的设计允许，我有一个解决方案：使用position:absolute和bottom:x值。盒子会向上扩展。

- cripox

---

请不要发布格式不正确或没有任何解释的解决方案。此外，该解决方案的语法显然是错误的，即使它能够工作，也不能回答OP的问题 - 他想要幻灯片，即动画，而且是向上的 - 如果没有上下文，这将简单地向下滑动。 - Yi Jiang

1. 我试图正确格式化，这就是为什么我编辑了我的帖子。
2. 我刚刚看到他想要它向上，所以我来评论一下：如果您的设计允许使用position:absolute和bottom:x应该可以解决问题。

- cripox

@cripox 在这里不应该使用 code 标签 - code 是用于 HTML 中的内联代码 - 你要找的是 pre，而且 Stack Overflow 使用 Markdown，它比 HTML 更干净 - 可以看一下这个链接：http://stackoverflow.com/editing-help - Yi Jiang

@Yi，语法一开始就错了，格式也不正确，但我在几分钟内编辑了我的答案：格式化并纠正了语法。我只是迅速点击了添加按钮，想看看自己是否能成为第一个回答者（我回答了3个帖子，在我写作期间已经有很多其他答案）- 所以这有点像一个实验。抱歉，我没想到你会这么快检查它。 - cripox

@cripox - 如果你的回答不是有效的，那么第一个发帖并没有什么用处 :) 快速发布一个有用的答案是很好的，但如果它甚至没有格式化（你可以在一个按钮点击中完成），那就只是缺乏努力了。 - Nick Craver