jQuery：动画难题答案

【问题标题】：jQuery:animate conundrumjQuery：动画难题
【发布时间】：2010-12-11 11:21:04
【问题描述】：

我遇到了 jQuery 动画问题...

我有一个页脚，上面有一个隐藏的 div。当有人单击标题附近的按钮时，div 应该动画 UP。有点像向上滑动，就像你从抽屉里拉出manila folder。（不是 div 底部向上滑动到顶部的正常向上滑动。）

我发现这段代码是我想要的，但是它正在移动基线（页脚）。

.featureBox{width:182px;
    height:150px;
    position:relative;
    border:1px solid red;
}

$('.featureBox').hover(function()  {
    $(this).animate({top:'-320px', height:'540px'},"slow");
},
function() {
    $(this).animate({top:'0px', height:'150px'},"slow");
})

将鼠标悬停在红色 div 框上时，您会看到它下方的 div 向下推。我怎样才能让它动画起来或长大？（嘿嘿。对不起。刚想到妈妈对我大喊大叫）。

【问题讨论】：

除了想妈妈，我不太清楚你说的“长大”是什么意思。你是说伸展还是移动？（如，高度保持不变，或者高度保持不变并且底部边框不移动？）
我们可以看到正在处理的 html 吗？（该页脚部分和隐藏的 div）
这里...想象一下。条形图。您会看到图表上的条形向上动画（a la Flex）。你如何获得一个 DIV 来为 UP 设置动画。有很多动画向下或向左或向右的例子。我还没有看到任何关于如何将 DIV 的底部保持在同一水平并让 DIV 的顶部上升的示例。
试试这个网址：jsbin.com/etafu

标签： javascript jquery css jquery-animate directory

【解决方案1】：

Here 是一个按照我认为你想要的方式工作的页面。我认为主要问题是扩展 div 需要位于具有高度的 div 内。 Here 是一个扩展 div 的页面，它在扩展时会覆盖其他内容。

查看Wordpress Sexybookmarks plugin 的代码，了解此类技巧的一个很好的示例。

【讨论】：

【解决方案2】：

我猜你的解决方法是以下两件事之一：

改变位置：相对于位置：绝对
您不想实际移动 .featureBox，而是移动 .featureBox 内的另一个元素（可能是 DIV）

【讨论】：