控制高度变化速度答案

【问题标题】：controlling the height change speed控制高度变化速度
【发布时间】：2013-10-16 05:40:57
【问题描述】：

我有以下 javascript 用于更改 div 的高度。但是，我不知道如何在 div 显示时调整速度。我知道 500 是 div 高度变为 30px，但我不知道当它变回 100% 时如何控制速度。谁能帮忙？

$(document).ready(function(){
$("#mydiv").click(function(){
var $this = $('#mydiv_2');
    $this.animate({height: $this.height() == 30 ? '100%' : 30}, 500);
});
});

【问题讨论】：

标签： javascript jquery html jquery-animate height

【解决方案1】：

$this.animate({height: $this.height() == 30 ? '100%' : 30}, 500);

第二个属性是以毫秒为单位的速度。

【讨论】：

它只控制高度变回30px时的速度。
速度变为100%时如何控制速度？
事实上，“动画”功能没有办法以百分比设置高度。
我忘了提到我正在尝试显示 div 的一部分，然后将其显示为 100%。因此溢出被隐藏，然后将其从 30px 动画到 100%，这是观众首先会看到的部分。
我认为小提琴的工作方式相反。它一开始显示 100% 然后变为 30px 你能显示解决这个问题吗？

【解决方案2】：

在这样的动画中使用慢

$this.animate({height: $this.height() == 30 ? '100%' : 30},'slow');

如果您需要更慢的使用时间（以毫秒为单位）来代替慢

$this.animate({height: $this.height() == 30 ? '100%' : 30}, 1200);

这会减慢 1.2 秒，相应调整:)

还可以查看Jquery Animate 了解更多选项

【讨论】：

【解决方案3】：

animate() 的第二个参数是以毫秒为单位的持续时间 1000ms 等于 1second。

见jquery documentation

【讨论】：

【解决方案4】：

看看jQuery docs。 animate()的第二个参数控制速度（越大越慢）。

编辑： 如果你想在 div 隐藏和显示时有不同的速度，试试这个：

if ($this.height() == 30) {
    $this.animate({height: '100%'}, 1200);
} else {
    $this.animate({height: 30}, 500);
}

【讨论】：

我知道 500 在降低 div 高度时会控制速度。但我不知道如何控制高度何时变为 100%