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

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

1 голос
/ 22 марта 2012

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

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

Есть идеи?

UPDATE

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

ОБНОВЛЕНИЕ 2

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

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

Ответы [ 2 ]

3 голосов
/ 22 марта 2012

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

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

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

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

Редактировать 1:

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

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

Нечетко, но делает свое дело.

Редактировать 2 :

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

Редактировать 3 :

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

0 голосов
/ 22 марта 2012

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

...