If you're seeing this message, it means we're having trouble loading external resources on our website.

Ако си зад уеб филтър, моля, увери се, че домейните *. kastatic.org и *. kasandbox.org са разрешени.

Основно съдържание

Преглед: 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.

Искаш ли да се присъединиш към разговора?

Все още няма публикации.
Разбираш ли английски? Натисни тук, за да видиш още дискусии в английския сайт на Кан Академия.