Установите высоту div по умолчанию в анимации jQuery

#javascript #jquery #jquery-animate

#javascript #jquery #jquery-анимировать

Вопрос:

Я создал выпадающее меню, html для выпадающей части в основном выглядит следующим образом:

 <div class="menu-item">
  <!-- Menu title -->
  <div class="drop-down">
    <!-- Content -->
  </div>
</div>

Я хочу анимировать это с помощью jQuery-Code (с помощью easing-plugin), но следующий код не работает:

 $(".menu-item").mouseenter(activate);
$(".menu-item").mouseleave(deactivate);

function deactivate()
{
  var dropdown = $(this).find("div.drop-down");
  dropdown.stop().animate(
    {height:     '0px'},
    {queue:       false,
     duration:    600,
     easing:      'easeOut'
    }
  );
}

function activate()
{
  var dropdown = $(this).find("div.drop-down");
  dropdown.stop().animate(
    {height:     'auto'},
    {queue:       false,
     duration:    600,
     easing:      'easeOut'
    }
  );
}

Сообщение в консоли ошибок выглядит так: «Предупреждение: Ошибка при синтаксическом анализе значения ‘height’. Заявление отброшено».

Если я использую «height: ‘100px'» или что-то подобное в activate -функции, это работает так, как ожидалось. Но по соображениям ремонтопригодности я хочу, чтобы высота вычислялась автоматически, поэтому выпадающий список адаптирует свой размер к своему содержимому.

Как этого можно достичь?

Приветствую, Йост

Ответ №1:

Я бы попытался использовать slideUp() и slideDown () для этой анимации. Обратите внимание, что эти функции принимают функции упрощения.

Другой вариант, если по какой-то причине вам нужно использовать animate для этого, вы можете захотеть сделать что-то подобное в своей activate функции:

 function activate(){
  var dropdown = $(this).find("div.drop-down");

  dropdown.css('height','auto')
          .hide()
          .stop()
          .animate(
             {height:     'auto'},
             {queue:       false,
              duration:    600,
              easing:      'easeOut'
          });
}

1. slideUp () и -Down () сделали свое дело, спасибо за это. Однако есть небольшая проблема: если выпадающий список содержит более одной строки, он скользит вниз по первой строке, но сразу же появляется вторая строка. Возможно, это связано с некоторыми настройками CSS.

Ответ №2:

Одним из решений может быть сохранение значения высоты в методе деактивации и использование его при активации. Я не думаю, что jQuery поддерживает анимацию свойства dimension в строковое значение.

 var menu_handler = (function(){
  var orig_height = 0;
  return {
    deactivate : function deactivate () {
      var dropdown = $(this).find("div.drop-down");
      orig_height = dropdown.height();
      dropdown.stop().animate(
        {height:     '0px'},
        {queue:       false,
         duration:    600,
         easing:      'easeOut'
        }
      );
    },
    activate : function activate () {
      var dropdown = $(this).find("div.drop-down");
      dropdown.stop().animate(
        {height:     orig_height},
        {queue:       false,
         duration:    600,
         easing:      'easeOut'
        }
      );
    }
  };
}

$(".menu-item").mouseenter(menu_handler.activate));
$(".menu-item").mouseleave(menu_handler.deactivate));