Latest web development tutorials

effetti jQuery - Animazione

Metodo jQuery animate () consente di creare animazioni personalizzate.



jQuery

il metodo animate () - jQuery animazioni

Metodo jQuery animate () viene utilizzato per creare un'animazione personalizzata.

sintassi:

$(selector).animate({params},speed,callback);

parametro richiesto params definisce la formazione di proprietà CSS animazione.

Il parametro di velocità opzionale specifica la durata dell'effetto. Esso può assumere i seguenti valori: "lento", "veloce", o millisecondi.

Il parametro di callback opzionale è il nome della funzione eseguita dopo il completamento.

L'esempio seguente mostra un metodo semplice animato applicazione (). E <div> elemento per il diritto di circolare 250 pixel:

Esempi

$("button").click(function(){
$("div").animate({left:'250px'});
});

Prova »

lampada Per impostazione predefinita, tutti gli elementi HTML hanno una posizione statica e non possono muoversi.
Per la posizione di funzionamento, ricordate il primo attributo posizione di elemento CSS impostata relativa, fisso o assoluto!

jQuery animate () - operativo più proprietà

Si prega di notare che il processo di generazione della animazione può utilizzare molteplici proprietà:

Esempi

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Prova »

lampadaÈ possibile animare il metodo () per azionare tutti gli attributi CSS?

Sì, quasi! Tuttavia, la cosa importante da ricordare: Quando si utilizza animate (), scrivere tutti i nomi attributi devono utilizzare la notazione Camel, per esempio, deve essere usato al posto di paddingLeft padding-left, invece di usare marginRight margin-right, etc. .

Allo stesso tempo, l'animazione colore non è inclusa nella libreria di base jQuery.

Se è necessario generare l'animazione a colori, è necessario jquery.com scaricare colori animazioni plugin.


jQuery animate () - l'uso di valore relativo

È anche possibile definire il valore relativo (il valore è relativo al valore corrente dell'elemento). Necessità di far precedere il valore con il + = o - =:

Esempi

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

Prova »

() JQuery animate - utilizzare il valore predefinito

Si può anche mettere il valore della proprietà di animazione di "spettacolo", "nascondere" o "Toggle":

Esempi

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Prova »

jQuery animate () - Con la funzione di coda

Per impostazione predefinita, jQuery fornisce funzionalità di accodamento per l'animazione.

Questo significa che se si scrive più di uno dopo l'altro chiamata animate (), jQuery creerà una chiamata di metodo questi coda "interno". Poi uno ad uno per eseguire questi animare le chiamate.

esempio 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");
});

Prova »

Il seguente esempio dell'elemento <div> viene spostato a destra 100 pixel, e quindi aumentare la dimensione del testo:

esempio 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Prova »