JQuery animate() metoda vă permite să creați animații personalizate.
jQuery Animatii - animate() Metoda
JQuery animate() metoda este utilizată pentru a crea animații personalizate.
Syntax:
$( Parametrul params necesar definește proprietățile CSS pentru a fi animate. Parametrul opțional de viteză specifică durata efectului. Se poate lua următoarele valori: "slow", "fast" , sau milisecunde.
Parametrul de apel invers opțional este o funcție pentru a fi executat după ce se termină animația.
Următorul exemplu demonstrează o simpla utilizare a animate() metoda; se mișcă un <div> elementul spre dreapta, până când a ajuns la o proprietate de stânga 250px:
În mod implicit, toate elementele HTML au o poziție statică, și nu pot fi mutate.
Pentru a manipula poziția, nu uitați să setați mai întâi proprietatea poziția CSS a elementului relative, fixed sau absolute !
jQuery animate() - Manipulează Proprietăți multiple
Observați că mai multe proprietăți pot fi animate în același timp:
Exemplu
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Încearcă - l singur »
Is it possible to manipulate ALL CSS properties with the animate() method?
Da, aproape! Cu toate acestea, există un lucru important să ne amintim: toate 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 padding-left, marginRight în loc de margin-right de margin-right , și așa mai departe.
De asemenea, animație de culoare nu este inclus în biblioteca de bază jQuery.
Dacă doriți să animați de culoare, aveți nevoie pentru a descărca plugin - ul de culoare Animații de la jQuery.com.
jQuery animate() - Utilizarea valorilor relative
De asemenea, este posibil să se definească valorile relative (valoarea este apoi în raport cu valoarea curentă a elementului). Acest lucru se face prin punerea += sau -= în fața valorii:
Exemplu
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Încearcă - l singur »
jQuery animate() - Utilizarea valorilor predefinite
Puteți specifica chiar și valoarea de animație o proprietate ca "show", "hide" , sau "toggle" :
Exemplu
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Încearcă - l singur »
jQuery animate() - Folosește Coadă Funcționalitate
În mod implicit, jQuery vine cu funcționalitate coadă pentru animații.
Acest lucru înseamnă că , dacă scrie mai multe animate() apeluri după reciproc, jQuery creează un "internal" coadă cu aceste apeluri de metode. Apoi se rulează insufletite numește unul câte unul.
Deci, dacă doriți să efectuați diferite animații după alta, vom beneficia de funcționalitatea coadă:
Exemplul 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Încearcă - l singur » Exemplul de mai jos întâi mută <div> elementul la dreapta, iar apoi crește dimensiunea fontului textului:
Exemplul 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Încearcă - l singur »
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»
jQuery Efecte de referință
Pentru o prezentare completă a tuturor efectelor jQuery, vă rugăm să mergeți la noastre jQuery Efect de referință .