Основно съдържание
Курс: Програмиране > Раздел 7
Урок 7: DOM анимация и ефекти с jQueryПреглед: DOM анимация в jQuery
jQuery предлага много функции за анимация и ефекти, които са изброени в документацията.
Промяна на видимостта
За прости промени във видимостта можеш да използваш
hide()
и show()
:$("#pic").hide();
$("#pic").show();
(Виж примера)Можеш да използваш
toggle()
, което ще реши дали да показва или да скрива според текущото състояние:
$("#pic").toggle();
(Виж примера)Можеш да зададеш продължителност във всяка от тези функции, а jQuery ще анимира промяната във видимостта:
$("#pic").toggle(1000);
Можеш да използваш и
slideDown()
, slideUp()
и slideToggle()
за плъзгащ ефект (Виж примера) или fadeIn()
, fadeOut()
и fadeToggle()
за избледняващ ефект
(Виж примера).Можеш да подадеш колбек функция като втори параметър на коя да е от тези функции, а jQuery ще повика тази функция обратно, когато анимацията завърши:
$("#pic").toggle(1000, function() {
$("body").append("Тук е!");
});
Можеш да свържеш няколко ефекта и да извикаш
delay()
, ако искаш да добавиш забавяне между тях:$("#pic").slideUp(300).delay().fadeIn();
Анимация по избор
Ако искаш да анимираш конкретни CSS свойства, можеш да използваш
animate()
: $("#pic").animate({
width: "70%",
opacity: 0{,}7,
padding: 20
}, 1000);
Забележи, че можеш да анимираш само CSS свойствата, които имат числова стойност – не можеш да използваш това, за да анимираш свойства като 'color'. (Виж пример)
Можеш да прикрепиш и различни колбек функции към към
animate()
, ако искаш да разбереш дали анимацията е в ход или е завършена. Разгледай документацията за повече подробности.Да анимираме с мярка
Анимациите трябва винаги да подобряват опита на потребителя, а не да го влошават. Анимациите трябва да помагат на потребителите да разберат нещо за състоянието на твоето приложение или да добавят нещо забавно към него – не трябва да забавят използването му, без това да се налага, и да ядосват потебителя. Можеш да помолиш потребителите за мнение за използването на анимации или да работиш с дизайнер, за да решиш как и къде да поставиш анимации.
Ако знаеш, че потебителят използва устойство, което не показва анимациите добре, можеш да зададеш
$.fx.off
стойност true
.Искаш ли да се присъединиш към разговора?
Все още няма публикации.