jQuery只为值'top'的顶部设置动画

Question

我最近有一个关于此的类似线程，但现在我需要为块的顶部设置动画。 就像现在一样，它从底部和顶部开始动画。

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

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

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

有没有办法让它从顶部位置缩小50％？

如果它有任何帮助

CSS：

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

HTML：

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

Answer 1

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

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

注意：它也需要放置容器。

Answer 2

以下是缩小顶部位置块的完整解决方案：

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);

}，function（）{     $（本）.animate（{         '身高'：'200px'     }，500）; }）;

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

Answer 3

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

已修改：已更新链接

查看小型演示：http://jsfiddle.net/rathoreahsan/ZMUz9/