В jQuery, как мне оживить свойство CSS max-height?

Ответ 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"...