Exemplu
„Animați“ un element, prin schimbarea înălțimii sale:
$("button").click(function(){
$("#box").animate({height: "300px"});
});
Încearcă - l singur » Definiție și utilizare
animate() metoda efectuează o animație personalizată a unui set de proprietăți CSS.
Această metodă se schimbă un element dintr-un stat la altul, cu stiluri CSS. Valoarea de proprietate CSS este schimbat treptat, pentru a crea un efect animat.
Numai valorile numerice pot fi animate (like "margin:30px" ) . Valorile șirurilor nu poate fi animat (like "background-color:red" ) , cu excepția siruri de caractere "show", "hide" și "toggle" de "toggle" . Aceste valori permit ascunderea și afișarea elementului animat.
Tip: Folosiți "+=" "-=" "+=" "-=" pentru animații relative.
Sintaxă
( Parametru Descriere styles Necesar. Specifică una sau mai multe proprietăți CSS / valori pentru a anima. Note: Numele de proprietate trebuie să fie de cămilă casetat atunci când este utilizat cu animate() metoda: Va trebui să scrie paddingLeft în loc de stânga umplutură, marginRight în loc de marja de -dreapta, și așa mai departe.
Proprietățile care pot fi animate:
- backgroundPositionX
- backgroundPositionY
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
Numai valorile numerice pot fi animate (like "margin:30px" ) . Valorile șirurilor nu poate fi animat (like "background-color:red" ) , cu excepția siruri de caractere "show", "hide" și "toggle" de "toggle" . Aceste valori permit ascunderea și afișarea elementului animat.
Tip: animații de culoare care nu sunt incluse în biblioteca de bază jQuery. Dacă doriți să animați de culoare, aveți nevoie pentru a descărca plugin - jQuery.com ul de culoare Animații de la jQuery.com speed Opțional. Specifică viteza animației. Valoarea implicită este de 400 de milisecunde Valori posibile:
- milisecunde (like 100, 1000, 5000, etc)
- "slow"
- "fast"
easing Opțional. Specifică viteza elementului în diferite puncte ale animației. Valoarea implicită este "swing" . Valori posibile: - "swing" - se mișcă mai lent la începutul / sfârșitul anului , dar mai rapid în mijloc
- "linear" - se mută într - o viteză constantă
Tip: Mai multe funcții de relaxare sunt disponibile în plugin - uri externe. callback Opțional. O funcție care urmează să fie executată după terminarea animației. Pentru a afla mai multe despre apel invers, vă rugăm să citiți jQuery Callback capitol
Sintaxa alternativ
( Parametru Descriere styles Necesar. Specifică una sau mai multe proprietăți CSS / valori pentru a anima (A se vedea valori posibile de mai sus) options Opțional. Specifică opțiuni suplimentare pentru animație. Valori posibile: - duration - setează viteza animației
- easing - specifică funcția de relaxare pentru a utiliza
- complete - specifică o funcție care urmează să fie executat după terminarea animației
- step - specifică o funcție care trebuie executată pentru fiecare pas în animație
- progress - specifică o funcție care trebuie executată după fiecare etapă în animație
- queue - o valoare boolean care specifică dacă este sau nu pentru a plasa animație în coada de așteptare efecte
- specialEasing - o hartă a uneia sau mai multor proprietăți CSS de la
> parametru de stiluri, și funcțiile lor de relaxare corespunzătoare - start - Specifică o funcție care urmează să fie executată atunci când începe animația
- done - o funcție specifică care urmează să fie executate atunci când capetele de animație
- fail - specifică o funcție pentru a fi executată în cazul în care animația nu reușește să finalizeze
- always - specifică o funcție care urmează să fie executată în cazul în care animația se oprește fără a finaliza
Încearcă-l singur - Exemple
Folosind animate() cu o funcție callback
Cum să utilizați animate() cu o funcție de apel invers , care repetă animația.
Alternate Exemplu Sintaxa
Folosind sintaxa alternativă pentru a specifica mai multe stiluri de animație și opțiuni.
Folosind animate() pentru a crea o bară de progres
Cum se utilizează animate() metoda pentru a crea o bară de progres.
Adăugați o derulare lină la ancore de pagină
Cum să utilizați animate() pentru a adăuga defilarea lină la link - uri.