jquery - jQueryは値「高さ」の上部のみをアニメーション化します

Question

最近、これについて同様のスレッドがありましたが、ブロックの上部をアニメーション化する必要があります。今のように下からも上からもアニメ化。

たとえば、縮小したいので、それを取得するために次のように書きました。

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

しかし、それは上と下の両方の位置から中央に縮小します。

上の位置だけ50%縮小させる方法はありますか？

ここで何か助けになるなら

CSS:

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

HTML:

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

score 1 · Accepted Answer

あなたはいくつかの絶対的な位置であなたのブロックを底に貼り付けることができます：

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

注：コンテナも配置する必要があります。

score 1 · Accepted Answer

上部のブロックを縮小するための完全なソリューションは次のとおりです。

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() { $(this).animate({ 'height': '200px' }, 500); });

score 0 · Accepted Answer

編集済み: リンクを更新しました

小さなデモを参照してください: http://jsfiddle.net/rathoreahsan/ZMUz9/

jquery - jQueryは値「​​高さ」の上部のみをアニメーション化します