jQuery efekt - metoda animate()

Przeglądarka efektów jQuery

Przykład

Zmień wysokość elementu "div":

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

Spróbuj sam

Definicja i użycie

Metoda animate() wykonuje niestandardową animację zestawu atrybutów CSS.

Ta metoda zmienia stan elementu za pomocą CSS, przechodząc od jednego stanu do drugiego. Wartości CSS zmieniają się stopniowo, co pozwala na tworzenie efektów animacji.

Tylko wartości liczbowe mogą tworzyć animacje (np. "margin:30px"). Wartości ciągowe nie mogą tworzyć animacji (np. "background-color:red").

Komentarz:Używaj "+=" lub "-=" do tworzenia względnych animacji (relative animations).

Gramatyka 1

$(selector).animate(styles,speed,easing,callback)
Parametry Opis
styles

Wymagane. Określa CSS style i wartości generujące efekt animacji.

Możliwe wartości CSS (podano przykłady):

Komentarz:CSS style ustawia się za pomocą nazwy DOM (np. "fontSize"), a nie nazwy CSS (np. "font-size")
speed

Opcjonalnie. Określa szybkość animacji. Domyślna wartość to "normal"

Możliwe wartości:

  • milisekundy (np. 1500)
  • "slow"
  • "normal"
  • "fast"
easing

Opcjonalnie. Określa funkcję easing do ustawienia prędkości animacji w różnych punktach animacji

Wbudowane funkcje easing:

  • swing
  • linear

Rozszerzenia wtyczek oferują więcej funkcji easing
callback

Opcjonalnie. Funkcja do wykonania po zakończeniu działania funkcji animate

Aby dowiedzieć się więcej o callback, odwiedź naszą jQuery Callback To rozdział.

Gramatyka 2

$(selector).animate(styles,options)
Parametry Opis
styles Wymagane. Określa CSS style i wartości generujące efekt animacji (jak wyżej)
options

Opcjonalnie. Określa dodatkowe opcje animacji

Możliwe wartości:

  • speed - ustawia szybkość animacji
  • easing - określa używaną funkcję easing
  • callback - określa funkcję do wykonania po zakończeniu animacji
  • step - określa funkcję do wykonania po zakończeniu każdego kroku animacji
  • queue - wartość logiczna. Indykuje, czy animacja ma być umieszczona w kolejce efektów. Jeśli wynosi false, animacja rozpocznie się natychmiast
  • specialEasing - z styles Mapowanie jednej lub kilku CSS właściwości oraz ich odpowiednich funkcji easing

Przeglądarka efektów jQuery