jQuery анимирует только верхнюю часть значения «высота»

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

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

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

Но он сжимается как из верхнего, так и из нижнего положения к центру.

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

Если это поможет, вот

CSS:

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

HTML:

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

colors jquery block jquery-animate
person RnD    schedule 02.07.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

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

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

person Ahsan Rathod    schedule 02.07.2012

arrow_upward
1
arrow_downward

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

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

примечание: для этого также потребуется позиционировать его контейнер.

person BiAiB    schedule 02.07.2012

arrow_upward
1
arrow_downward

Вот полное решение для усадочного блока в верхнем положении:

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

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

person gaurang171    schedule 02.07.2012