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