In jQuery, how do I animate the “max-height” CSS property?
I can easily animate the "opacity" property
$("#blah").animate({ opacity: 0.5}, 1000);
How can I animate the max-height css property... example:
$("#blah").animate({ "max-height": 350}, 1000);
(hint, that code doesn't work)
EDIT: To answer the questions below:
- There are multiple images all of css class "blah"
- The images are of random sizes, BUT they all have max-height: 100px
- When a user hovers over an image, I want it to animate the max-height (thereby smoothly un-restricting the height)
3 ответа
ОК, так что нет способа сделать то, что я хотел... Поэтому мне пришлось сделать свою собственную функцию, чтобы иметь общую "анимационную" функцию (от x до y за d миллисекунд ).
Я написал сообщение в блоге, описывающее, как я это сделал здесь: Общая функция "Animate" с jQuery
Я также включил демонстрацию того, что она может делать. Демонстрационная ссылка находится внизу статьи, или для нетерпеливых, вы можете просто нажать здесь.
Я думаю, что вы должны сначала анимировать свойство высоты, а когда анимация завершится, заменить заданную высоту на авто и сбросить максимальную высоту на то, что вам нужно:
$("#blah").animate({ "height": 350}, 1000, function(){
$(this).css('height','auto').css('max-height',350);
});
Меня смущает это требование. Если вы хотите что-то анимировать, по-видимому, оно уже должно быть равно максимальной высоте. Я бы сделал оператор of, чтобы проверить, что высота элемента равна его максимальной высоте, если это так, удалите максимальную высоту, а затем анимируйте высоту. Должен быть тот же эффект