В jQuery, как мне оживить свойство CSS max-height?
Я могу легко анимировать свойство "opacity"
$("#blah").animate({ opactiy: 0.5}, 1000);
Как я могу анимировать свойство max-height css... example:
$("#blah").animate({ "max-height": 350}, 1000);
(подсказка, этот код не работает)
EDIT: Чтобы ответить на следующие вопросы:
- Существует несколько изображений всех классов css "blah"
- Изображения случайных размеров, НО все они имеют максимальную высоту: 100 пикселей
- Когда пользователь наводится на изображение, я хочу, чтобы он анимировал максимальную высоту (тем самым плавно не ограничивая высоту)
Ответы
Ответ 1
ОК, так что нет способа делать то, что я хотел... Поэтому мне пришлось сделать свою собственную функцию для создания универсальной "анимационной" функции (от x до y в миллисекундах).
Я написал сообщение в блоге, описывающее, как я это сделал: Общая функция "Анимация" с jQuery
Я включил демонстрацию того, что он может сделать. Демо-ссылка находится внизу статьи или для нетерпения, вы можете просто щелкнуть здесь.
Ответ 2
Этот вопрос немного устарел, но вот как я его решил с помощью базового jQuery, если кому-то еще нужно простое решение.
В моем случае у меня есть список сообщений в блоге, которые сначала отображаются на странице с помощью max-height
, где отображаются только первые 4 строки текста, а остальные overflow: hidden
. У меня есть кнопка expand/collapse, которая переключает статью из ее свернутой формы в расширенную (полностью отображаемую) и обратно.
Сначала я попробовал анимацию свойства max-height напрямую, и, как вы обнаружили выше, это не сработает. Я также пробовал это с css-переходами с тем же неутешительным результатом.
Я также попытался просто установить его на очень большое число, например "1000em", но это сделало анимацию тупой, поскольку она буквально интерполировалась до такого большого значения (как и следовало ожидать).
В моем решении используется scrollHeight, который используется для определения естественной высоты каждой истории после загрузки страницы следующим образом:
$(function(){ // DOM LOADED
// For each story, determine its natural height and store it as data.
// This is encapsulated into a self-executing function to isolate the
// variables from other things in my script.
(function(){
// First I grab the collapsed height that was set in the css for later use
var collapsedHeight = $('article .story').css('maxHeight');
// Now for each story, grab the scrollHeight property and store it as data 'natural'
$('article .story').each(function(){
var $this = $(this);
$this.data('natural', $this[0].scrollHeight);
});
// Now, set-up the handler for the toggle buttons
$('.expand').bind('click', function(){
var $story = $(this).parent().siblings('.story').eq(0),
duration = 250; // animation duration
// I use a class 'expanded' as a flag to know what state it is in,
// and to make style changes, as required.
if ($story.hasClass('expanded')) {
// If it is already expanded, then collapse it using the css figure as
// collected above and remove the expanded class
$story.animate({'maxHeight': collapsedHeight}, duration);
$story.removeClass('expanded');
}
else {
// If it is not expanded now, then animate the max-height to the natural
// height as stored in data, then add the 'expanded' class
$story.animate({'maxHeight': $story.data('natural')}, duration);
$story.addClass('expanded');
}
});
})(); // end anonymous, self-executing function
});
Чтобы сделать то же самое с изображениями, я бы просто обернул их в внешний div, что и вы установили max-height
и overflow:hidden
, так же, как я использовал div.story выше.
Ответ 3
Я думаю, что сначала нужно анимировать свойство высоты, и когда анимация закончится, замените высоту установки на auto и reset max-height на то, что вам нужно:
$("#blah").animate({ "height": 350}, 1000, function(){
$(this).css('height','auto').css('max-height',350);
});
Ответ 4
Меня смущает требование. Если вы хотите оживить что-то, предположительно, оно должно быть равно максимальной высоте. Я бы выполнил инструкцию для проверки высоты элемента, равную ее максимальной высоте, если так удалить максимальную высоту и затем оживить высоту. Должен быть тот же эффект
Ответ 5
Чистое решение для CSS
HTML
<div>max-height element</div>
CSS
div {
max-height:20px;
overflow:hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;}
div:hover {
max-height:300px}
DEMO
Наслаждайтесь!
Ответ 6
Я столкнулся с тем же.
Ответ заключается в использовании "maxHeight"
, а не "max-height"
...