Установить высоту div по умолчанию в анимации jQuery - PullRequest
Новая
       8

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

1 голос
/ 13 мая 2011

Я создал раскрывающееся меню, 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: '100px'" или что-то похожее в activate -функции, она работает как положено.Но из соображений удобства обслуживания я хочу, чтобы высота вычислялась автоматически, поэтому раскрывающийся список адаптирует ее размер к своему содержимому.

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

Привет, Jost

Ответы [ 2 ]

5 голосов
/ 13 мая 2011

Я бы попытался использовать 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'
          });
}
0 голосов
/ 13 мая 2011

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

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