Взаимодействие с анимацией с jQuery slideToggle

Question

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

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

Любые идеи?

UPDATE

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

UPDATE 2

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

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

Answer 1

Откровенная Karmaw * * * г только в случае, если я нахожусь на правильном пути;)

---

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

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

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

---

Edit 1:

Другой обходной я помню, с помощью:

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

Fugly, но делает трюк.

---

Edit 2:

Связанный с этим вопрос (и обходной) are described here

---

Edit 3:

ли this fiddle работу за вас, случайно ? Добавлена ​​Контейнер с дополнением - извините плохое форматирование, jsfiddle - не забава на iPhone.

Answer 2

Плагин jQuery Easing может помочь.