Если вы впервые попробовали jQuery много лет назад, возможно, это была способность делать анимацию. Возможно, это было одним из первых крупных достижений jQuery. В наши дни CSS также может выполнять анимацию с довольно приличной поддержкой браузера, и он имеет тенденцию быть более производительным, поэтому менее актуален. Однако, если вам нужна сверхглубокая поддержка браузера, jQuery по-прежнему остается вариантом.
Мы уже рассмотрели, как изменить CSS в jQuery. Выглядит это так:
$("#element").css(( "background-color": "red", "left": "20px" ));Вместо того, чтобы мгновенно перемещать этот элемент к этим значениям, мы можем их анимировать. Выглядит почти так же:
$("#element").animate(( "background-color": "red", "left": "20px" ));Вот ручка, которую мы сделали на видео:
См. Pen e111fbfa7506d19034d977b17e2160a3 Криса Койера (@chriscoyier) на CodePen
Если мы проверим этот элемент в инструментах разработчика браузеров, мы увидим, как jQuery выполняет эту анимацию. По сути, он быстро повторяет встроенный стиль, применяемый к этим элементам.
В этом видео мы углубляемся в некоторый код jQuery, который написал кто-то другой, чтобы увидеть, насколько хорошо мы можем его проанализировать.
См. Pen jQuery animate height: auto от Джоша Парретта (@JTParrett) на CodePen
Во время этого путешествия мы отправляемся в небольшое интересное побочное путешествие по анимации автоматических высот. Это то, что ни CSS, ни JavaScript не могут сделать особенно хорошо. Они предпочитают точные цифры. Анимировать от 10 до 200 пикселей имеет смысл. Анимировать 10 пикселей до «того, чем вы обычно будете», не так просто.
В коде Джоша мы находим умную функцию, которая, по сути, устанавливает высоту автоматически, измеряет ее, возвращает ее прежним значением, а затем анимирует это недавно протестированное значение. Довольно изящный трюк! Для более надежной демонстрации, которая идет туда-сюда и в необработанном JavaScript, см. Здесь.
Я не заметил этого, пока видео не закончилось, но jQuery действительно помогает нам и в этом. Файл, в котором есть причина использовать jQuery # 40985. Использование .slideUp/ .slideDown/ .slideToggle- просто как-то работает, даже если элемент скрыт display: noneдля начала.
См. Pen jQuery animate height: auto Криса Койера (@chriscoyier) на CodePen
Для тестирования нашей работы в старом IE мы использовали BrowserStack, который также интегрирован в CodePen.