jQuery ed animazione

jQuery include metodi che creano effetti speciali agli elementi per nascondere, mostrare, cambiare le proprietà dei CSS ed operazioni di fade-in o fade-out. Questi metodi possono essere utili nella costruzione di un'interfaccia utente interattiva.

Metodo	Descrizione
animate()	È possibile eseguire animazioni personalizzate utilizzando le proprietà CSS dell'elemento.
stop()	Interrompe l'esecuzione delle animazioni sugli elementi specificati.
fadeIn()	Visualizza l'elemento o gli elementi specificati sfumandoli fino a renderli opachi.
fadeOut()	Nasconde l'elemento o gli elementi specificati sfumandoli in modo da renderli trasparenti.
fadeTo()	Regola l'opacità dell'elemento o degli elementi specificati.
fadeToggle()	Visualizza o nasconde l'elemento o gli elementi specificati animandone l'opacità.
hide()	Nasconde l'elemento o gli elementi specificati.
show()	Visualizza l'elemento o gli elementi specificati.
queue()	Mostra o manipola la coda di funzioni da eseguire sull'elemento specificato.
slideUp()	Nasconde l'elemento o gli elementi specificati con un movimento di scorrimento verso l'alto.
slideDown()	Nasconde l'elemento o gli elementi specificati con un movimento di scorrimento verso il basso.
slideToggle()	Visualizza o nasconde l'elemento o gli elementi specificati con un movimento scorrevole.
toggle()	Visualizza l'elemento o gli elementi nascosti o nasconde gli elementi visibili.

jQuery animate()

Il metodo jQuery animate() esegue un'animazione personalizzata usando le proprietà CSS dell'elemento. Il metodo animate() cambia le proprietà CSS esistenti alle proprietà specificate con il movimento.

Specifica un selettore per ottenere il riferimento di un elemento a cui vuoi aggiungere l'effetto animazione e poi chiama il metodo animate() con l'oggetto JSON per le proprietà CSS, la velocità dell'animazione e altre opzioni.

Sintassi:

$('espressione di selezione').animate({ nomeProprietàCSS: 'valore'},
durata,
tipologia,
callback);

$('espressione di selezione').animate({ nomeProprietà: 'valore'},{ opzioni });

Nell'esempio seguente, cambio l'altezza e la larghezza dell'elemento con l'animazione.

$('#mioDiv').animate({
height: '200px',
width: '200px'
});

È possibile applicare la durata dell'animazione in milisecondi come secondo parametro del metodo animate().

$('#mioDiv').animate({
height: '200px',
width: '200px'
},
1000);

Nell'esempio sotto specifico un parametro stringa che indica quale funzione di tipologia di accelerazione utilizzare per la transizione. La libreria jQuery fornisce due funzioni in particolare: lineare e swing.

$('#mioDiv').animate({
height: '200px',
width: '200px'
},
1000, 'linear');

Poi inserisco una funzione callback da eseguire al termine dell'animazione.

$('#mioDiv').animate({
height: '200px',
width: '200px'
},
1000, 'linear',
function () {
$('#msgDiv').append('Animation completed');
});

È possibile specificare varie opzioni come oggetto JSON. Visita api.jquery.com per maggiori informazioni.

jQuery queue()

Sintassi:

$('espressione di selezione').queue();

$(document).ready(function () {

$('#mioDiv').toggle(200);
$('#mioDiv').fadeOut(400);
$('#mioDiv').fadeIn(200);
$('#mioDiv').slideDown(400);
$('#mioDiv').append('# varie animazioni: ' + $('#mioDiv').queue().length);
});

jQuery fadeIn()

Sintassi:

$('espressione di selezione').fadeIn(velocità, tipo accelerazione, callback);

$('#mioDiv').fadeIn(3000, linear, function () {
$('#mess').append('fadeIn() completato.')
});

Per fadeOut() la sintassi e identica cambia solo il nome del metodo.

jQuery hide() e show()

Sintassi:

$('espressione di selezione').hide(velocità, tipo accelerazione, callback);

$('espressione di selezione').show(velocità, tipo accelerazione, callback);

$('#div1').hide(300, function () {
$('#testo').append('Il testo è nascosto.')
});

Per il metodo toggle() la sintassi è identica cambia solo il nome del metodo.

<<<

Nessun argomento precedente

>>>

Nessun argomento seguente

Corso JavaScript per principianti a 12,99 su Udemy

Console