jQuery анимировать только верхнюю часть значения 'height'

Question

У меня недавно был подобный поток об этом, но теперь мне нужно анимировать верхнюю часть блока. Как и сейчас, он оживляет как снизу, так и сверху.

Например, я хочу, чтобы сжать и так, чтобы получить, что я писал:

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

Но он сжимается и из верхней и нижней позиции в центре.

Есть ли способ уменьшить его на 50% только с верхнего положения?

Если бы какой-либо помощи здесь

CSS:

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

HTML:

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

Answer 1

Вы можете попробовать http://docs.jquery.com/UI/Effects

Отредактировано: Ссылка Обновлено

Смотрите небольшую демо: http://jsfiddle.net/rathoreahsan/ZMUz9/

Answer 2

вы можете вставить свой блок в нижней части с некоторым абсолютным позиционированием:

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

примечание: ему также понадобится его контейнер.

Answer 3

Вот полное решение для сжатия блока на верхней позиции:

HTML:

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

УС:

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

JQuery:

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

}, функция() { $ (это) .animate ({ 'Высота': '200px' }, 500); });

Я также создал мусорное ведро с раствором, поэтому попробовать это на http://codebins.com/codes/home/4ldqpc8