Najnowsze tutoriale tworzenie stron internetowych
 

jQuery animate() Method

<Metody jQuery Effect

Przykład

"Animacja" elementu, poprzez zmianę jego wysokości:

$("button").click(function(){
    $("#box").animate({height: "300px"});
});
Spróbuj sam "

Definicja i Wykorzystanie

animate() metoda wykonuje animację niestandardową zestaw właściwości CSS.

Metoda ta zmienia element z jednego stanu do drugiego ze stylami CSS. Wartość właściwości CSS zmienia się stopniowo, aby stworzyć efekt animowany.

Tylko wartości liczbowe mogą być animowane (jak "margin:30px" ). Wartości łańcuchowe nie mogą być animowane (jak "background-color:red" ), z wyjątkiem struny "show", "hide" i "toggle" . Wartości te pozwalają na ukrywanie i pokazywanie element animowany.

Wskazówka: Użyj "+=" "-=" "+=" "-=" Dla animacji względne.

Składnia

(selector).animate({styles},speed,easing,callback)

Parametr Opis
styles Wymagany. Określa jedną lub więcej wartości CSS Properties / animować.

Uwaga: nazwy właściwości muszą być obudowane wielbłąda, gdy używana z animate() metody: Musisz napisać paddingLeft zamiast padding-left, marginRight zamiast margin-right, i tak dalej.

Właściwości, które mogą być animowane:


Tylko wartości liczbowe mogą być animowane (jak "margin:30px" ). Wartości łańcuchowe nie mogą być animowane (jak "background-color:red" ), z wyjątkiem struny "show", "hide" i "toggle" . Wartości te pozwalają na ukrywanie i pokazywanie element animowany.

Wskazówka: Kolor animacje nie są ujęte w podstawowej biblioteki jQuery.Jeśli chcesz ożywić kolor, trzeba pobrać wtyczkę Kolor Animations z jQuery.com
speed Opcjonalny. Określa się szybkość animacji. Wartość domyślna wynosi 400 milisekund

Możliwe wartości:

  • milisekund (jak 100, 1000, 5000, etc)
  • "slow"
  • "fast"
easing Opcjonalny. Określa prędkość elementu w różnych punktach animacji. Domyślną wartością jest "swing" . Możliwe wartości:
  • "swing" - porusza się wolniej na początku / końca, ale szybciej w środku
  • "linear" - porusza się ze stałą prędkością
Wskazówka: Więcej złagodzenie funkcje są dostępne w zewnętrznych wtyczek.
callback Opcjonalny. Funkcja mają zostać wykonane po zakończeniu animacji. Aby dowiedzieć się więcej na temat zwrotnego, zapoznaj się z naszą jQuery oddzwan rozdział

Alternatywna składnia

(selector).animate({styles},{options})

Parametr Opis
styles Wymagany. Określa jedną lub więcej właściwości CSS / wartości animować (Patrz możliwe wartości powyżej)
options Opcjonalny. Określa dodatkowe opcje animacji. Możliwe wartości:
  • duration - ustawia szybkość animacji
  • easing - określa funkcję łagodzenia używać
  • complete - określa funkcję mają zostać wykonane po zakończeniu animacji
  • step - określa funkcję do wykonania dla każdego kroku w animacji
  • progress - określa funkcję, która będzie wykonywana po każdym kroku w animacji
  • queue - wartość logiczna określająca, czy należy umieścić animację w kolejce efektów
  • specialEasing - mapa z jednej lub więcej właściwości CSS od > Parametr style i ich funkcje odpowiadające złagodzenie
  • start - określa funkcję do wykonania, gdy zaczyna animacja
  • done - określa funkcję do wykonania, gdy końce animacji
  • fail - określa funkcję do wykonania, jeśli nie zakończy się animacja
  • always - określa funkcję do wykonania, jeśli animacja zatrzymuje się bez zakończenia

Spróbuj sam - przykłady

Korzystanie animate() z funkcji zwrotnej
Jak używać animate() z funkcji wywołania zwrotnego, który powtarza animację.

Alternatywny Składnia Przykład
Korzystanie z alternatywnej składni, aby określić wiele stylów i opcje animacji.

Korzystanie animate() , aby utworzyć pasek postępu
Jak używać animate() metodę, aby utworzyć pasek postępu.

Dodaj płynne przewijanie stron do kotew
Jak używać animate() , aby dodać płynne przewijanie do linków.

<Metody jQuery Effect