JQuery за начинаещи

Продължаваме да учим jQuery. Преминаване към ефектите ...

Тази статия е включена в урок за jQuery за начинаещи. Урокът се разпространява безплатно и е придружен от интерактивни примери.

Исках да напиша огромна статия за ефектите, с примери за тази или онази анимация, но се оказа по-скоро бележка, която ще ви помогне да разберете същността на ефектите в jQuery

Не забравяйте - всички анимационни ефекти на jQuery се въртят около функция. анимира - тази функция приема едно или няколко CSS свойства на елемента и ги променя от първоначалното към крайното в N-ти брой итерации (броят на итерациите зависи от определеното време, но поне една итерация за 13 ms (ако I са изкопали тази стойност правилно)).

Функцията за анимация приема следните параметри:

  • параметри - описание на CSS свойствата на елемента, към който ще се появи анимацията (т.е. имаме div с височина 100px - казваме animate () - и височината плавно се променя на 200px)
  • продължителност - скорост на анимация - зададена в милисекунди или използваща ключови думи „бързо“ = 200 ms, „нормално“ = 400 ms или „бавно“ = 600 ms
  • облекчаване - посочваме коя функция ще използваме, за да увеличим стойностите, да изберем „линейна“ или „люлка“ (ако искате повече, вижте приставката за облекчаване)
  • обратно извикване - функция, която ще бъде извикана след края на анимацията

Алтернативен метод за инициализация:

  • параметри - описание на CSS свойствата на елемента, към който ще се появи анимацията
  • настроики - обект за настройки:
    • продължителност - вижте по-горе
    • облекчаване - виж по-горе
    • завършен - подобно на описания по-рано параметър за обратно извикване
    • стъпка - друга функция за обратно извикване - отговаря за промяна на параметрите стъпка по стъпка - пример по-долу
    • queue - флаг на опашката, ако е зададен на false - тогава тази анимация ще игнорира опашката и ще започне незабавно

Ако погледнете ръководството за потребителя, можете да намерите още няколко спомагателни функции в раздела за ефекти:

  • show () - показва избрани елементи
  • hide () - скрива избраните елементи
  • toggle () - превключване между показване/скриване
  • slideDown (скорост, обратно извикване) - избутва обекта (ите) надолу - увеличава височината от 0 до 100%
  • slideUp (скорост, обратно извикване) - премества обекта (ите) нагоре - намалява височината от 100% на 0
  • slideToggle (скорост, обратно повикване) - превключване между slideDown/slideUp
  • fadeIn (скорост, обратно повикване) - показва избраните елементи - променя прозрачността на елементите
  • fadeOut (скорост, обратно извикване) - скрива избраните елементи - променя прозрачността на елементите
  • fadeTo (скорост, непрозрачност, обратно извикване) - променя прозрачността на елементите до определената стойност

Най-простите методи за скриване и показване правят без анимационната функция, тъй като манипулирайте само атрибута на дисплея (демонстрация):