Задержка в анимации с помощью jQuery slideToggle

Я пытаюсь сделать простой JQuery slideToggle() на DIV, содержащем текст и обнаружили, что анимация очень вялая (кажется, колеблется), как slideDown анимация приближается к низу скользящего DIV.

Код и пример этого можно найти здесь. Я тестировал на нескольких компьютерах и все современные версии популярных браузеров, все ведут себя одинаково. Странно, но когда я запускаю ту же самую страницу в jsFiddle, она плавная.

Есть идеи?

ОБНОВИТЬ

Частично это, как кто-то предположил, заключается в том, что jQuery не знает высоту скользящего DIV до запуска анимации. Поскольку содержимое в скользящем DIV будет динамичным и либо очень коротким, либо несколько длинным, я тоже. Я попытался получить высоту DIV, прежде чем скрыть ее с помощью jQuery, а затем соответствующим образом установить высоту CSS. Сделано для более плавной анимации, но, вероятно, не лучшее решение - демо

ОБНОВЛЕНИЕ 2

Похоже, что проблема была из-за нескольких проблем CSS с первоначальным примером. Во-первых, слишком много DIV. Во-вторых, у скользящего DIV был набор прокладок - плохо сочетается с toggleSlideи, наконец, скользящий DIV находился в контейнере DIV, который также содержал #control-container (кнопка) DIV.

Сокращение DIV до двух (внешний DIV для скользящего элемента и сам скользящий DIV) и не установка внешнего скользящего заполнения DIV, казалось, сделали трюк - последний пример.

Источник

2 ответа

Решение

Откровенная Карма* на всякий случай, если я на правильном пути;)

Я нахожусь на моем iPhone прямо сейчас, поэтому я не могу проверить свое предположение - но я сталкивался с подобными причудами раньше, когда анимировал элементы с помощью padding и / или margin свойства и height:auto,

jQuery, похоже, с трудом определяет фактическую высоту, прежде чем анимировать в этих условиях.

Попробуйте обернуть ваш фактический контент в контейнерный блок и / или задать ему фиксированную высоту, чтобы увидеть, будет ли анимация работать гладко.

Изменить 1:

Другой обходной путь, который я помню, использовал:

  • Не скрывать элемент с помощью CSS
  • На domready определите высоту элемента с помощью jQuery и назначьте его элементу с помощью data()затем установите элемент height в 0 а также overflow:hidden
  • Вместо slideToggle()использовать animate() с высотой, сохраненной ранее.

Fugly, но делает свое дело.

Изменить 2:

Связанная проблема (и обходной путь) описаны здесь

Изменить 3:

Эта скрипка работает на вас, случайно? Добавлен контейнер с отступами - извините за плохое форматирование, jsfiddle не доставляет удовольствия на iPhone.

Источник

Может помочь плагин JQuery Easing.

Источник
Другие вопросы по тегам