Jquery：向上扩展 div答案

【问题标题】：Jquery: Expand Div UpwardsJquery：向上扩展 div
【发布时间】：2010-09-07 23:26:12
【问题描述】：

好的，我有一个 50px（高度）的 div，宽度无关紧要，显示标题。我想使用 jquery，所以当我将鼠标悬停在 div 上时，它会向上扩展至（70px）以显示隐藏在标题下方的内容

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

【问题讨论】：

在 HTML 中，内容通常是向下流动的。您确定要让 div 向上展开吗？

标签： jquery

【解决方案1】：

这个 sn-p 应该可以解决问题：

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

这是一个现场演示：http://jsfiddle.net/MeBxJ/

【讨论】：

【解决方案2】：

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

编辑：我刚刚了解您只想向上扩展。如果您的设计允许，我对此只有一个解决方案：使用 position:absolute 和 bottom:x 值。盒子会向上展开

【讨论】：

在没有正确格式化或任何解释的情况下停止发布解决方案。此外，解决方案的语法显然是错误的，即使它有效，它也没有回答 OP 的问题 - 他想要幻灯片，即。动画，还有 upward - 如果没有上下文，这会简单地向下滑动
1) 我尝试正确格式化，这就是我编辑帖子的原因。 2）我刚刚看到他希望它向上，所以我来对此发表评论：如果您的设计允许使用 position:absolute 和 bottom:x 应该可以解决问题
@cripox 你不应该在这里使用code 标记——code 用于 HTML 中的内联代码——你正在寻找pre，无论如何 Stack Overflow 使用 Markdown，即比 HTML 更干净——看看这个stackoverflow.com/editing-help
@Yi 首先语法错误并且格式不正确，但我在几分钟内编辑了我的答案：格式化并更正了语法。我只是快速点击添加按钮，看看我是否可以成为第一个答案（我回答了 3 个帖子，而我在写的时候还有很多其他答案）——所以这是一种实验。抱歉，没想到你会这么快检查。
@cripox - 如果它不是一个有效的答案，那么成为第一个发布的人并不是很有用:) 快速发布一个有用的答案，这很好，但如果它甚至不是格式化（您可以一键点击），这只是 IMO 的努力。