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