jQuery仅对值“高度”的顶部进行动画处理答案

【问题标题】：jQuery animate only the top of value 'height'jQuery仅对值“高度”的顶部进行动画处理
【发布时间】：2023-04-11 00:32:01
【问题描述】：

我最近有一个类似的线程，但现在我需要为块的顶部设置动画。就像现在一样，它从底部和顶部都进行动画处理。

例如，我希望它缩小，所以为了得到我写的：

$('#yellow').animate({height:'50%'},500);

但它会从顶部和底部位置收缩到中心。

有没有办法让它只从顶部缩小50%？

如果对这里有帮助的话

CSS：

#yellow{
height:250px;
width:500px;
background-color:yellow;
}

HTML：

<div id='yellow'></div>

【问题讨论】：

【解决方案1】：

这里是顶部位置收缩块的完整解决方案：

HTML：

<div id="yellow">sdsds</div>

CSS：

#yellow{  position:absolute;  bottom: 0;  height:200px;  width:250px;  background-color:yellow; }

JQuery:

$("#yellow").toggle(function() {
$(this).animate({
    'height': '100px'
}, 500);

}，函数（）{ $(this).animate({ “高度”：“200px” }, 500); });

我还用解决方案创建了一个 bin，所以试试这个 http://codebins.com/codes/home/4ldqpc8

【讨论】：

【解决方案2】：

你可以试试http://docs.jquery.com/UI/Effects

已编辑：链接已更新

看一个小演示：http://jsfiddle.net/rathoreahsan/ZMUz9/

【讨论】：

【解决方案3】：

你可以通过一些绝对定位将你的方块粘在底部：

#yellow{
  position:absolute;
  bottom: 0;
  height:250px;
  width:500px;
  background-color:yellow;
}

注意：它还需要定位它的容器。

【讨论】：