Как да направите флуидно меню с анимация с помощта на jQuery
В този урок ще научим как да създадем интересно меню с анимация и красиви ефекти.
Цел - гладко меню
Въведение - Обяснение на термина "облекчаване"
Нашето меню има плавна анимация и всичко това се случва благодарение на „облекчаване“. За пълно разбиране на този термин се обърнете към Центъра за разработчици на Flash:
Терминът "облекчаване" се отнася до постепенното ускорение и забавяне по време на анимацията, което го прави по-реалистичен. „Улесняването“ създава по-правдоподобен вид на ускорение или забавяне чрез постепенно регулиране на скоростта на промяна.
Благодарение на вълшебния плъгин jQuery Easing, ние имаме възможността да използваме "Easing" извън Flash и Actioncript среди.
Стъпка 1 - Подгответе структурата
Преди да започнете с jQuery, трябва бързо да създадете структура на менюто, използвайки XHTML и да заредите необходимите файлове. Създавайте нови XHTML, CSS и javascript документи. Избрах заглавие за всяко "анимирано меню". Също така създайте две папки - една за изображения и една за javascript. По-долу е екранна снимка за по-голяма яснота:
Нищо особено, както можете да видите. Сега в html файла започнете да зареждате необходимите библиотеки и външни файлове в заглавката. Реших да заредя jQuery от архива на кода от Google и приставката "Easing" от папката "js". Редът за качване на файлове е много важен.
След това копирайте структурата на менюто в маркера на тялото:
На всеки елемент от менюто се присвоява клас, който отговаря за цвета на блока. Всеки блок съдържа заглавие и подзаглавие, които са скрити по подразбиране.