Кто-нибудь из вас знает ответ на следующую проблему. Меня сводит с ума то, что я не могу найти решение.
Я хочу анимировать в jQuery, добавляя / заменяя класс и переходя между ними, НЕ используя встроенный стиль.
Именно так работает переход CSS3, и он действительно хорош и позволяет быстро создавать прототипы. Но я хочу сделать это в jQuery, потому что я хочу, чтобы он был нормализован во всех браузерах.
Я давно использовал jQuery animate, но использовал его только для добавления встроенного стиля. Это становится очень грязным в управлении и означает, что я не могу написать конечный результат в CSS и отделить уровень представления от логики.
Рассмотрим следующий пример. В CSS3, если я хочу анимировать высоту div, изменяя высоту div, я могу сделать это:
- У div есть класс .object с начальной высотой 100 пикселей.
- Событие запускается, и у div теперь есть классы .object и .active.
- С помощью класса .active CSS теперь устанавливает высоту в 150px
- Используя переход CSS3, я могу позволить плавный переход между двумя в течение 2 секунд с замедлением.
Если я хочу сделать то же самое в jQuery:
- У div есть класс .object, начальная высота которого составляет 100 пикселей.
- Событие запускается, и я использую .animate для анимации высоты объекта до 150px
- В результате CSS теперь устанавливает высоту 150px, используя встроенный стиль
- Используя параметры, я могу установить скорость в мс с помощью замедления.
Вам может быть известен пользовательский интерфейс jQuery, который позволяет переходить на toggleClass и switchClass:
http://jqueryui.com/demos/toggleClass/
Однако, к сожалению, он не будет работать для приведенного выше примера, потому что он работает, только если в начальном классе не задана конкретная высота. Чтобы проверить это, осмотрите элемент в демо-версии, задайте ему высоту и посмотрите, как работает демо-версия.
Надеюсь, кто-то может мне помочь с этим