Sintesi
Nascondere e mostrare
$().hide(speed, callback) e $().show(speed, callback)
Con jQuery, è possibile nascondere e visualizzare gli elementi HTML con i metodi hide() e show():
Il parametro facoltativo speed specifica la velocità di occultamento/visualizzazione e può assumere i valori: "Slow", "Fast" o millisecondi.
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della transizione.
$("#hide").click(function(){
$("#cerchio").hide();
});
$("#show").click(function(){
$("#cerchio").show();
});
Dissolvenza
$(selector).fadeIn(speed,callback);
Il metodo jQuery fadeIn() viene utilizzato far apparire con una dissolvenza un elemento nascosto.
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della dissolvenza.
$(selector).fadeOut(speed,callback);
Il metodo jQuery fadeOut() viene utilizzato far scomparire con una dissolvenza un elemento.
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della dissolvenza.
$(selector).fadeToggle(speed,callback);
Il metodo jQuery fadeToggle() applica all'elemento il metodo fadeIn() se l'elemento non è visibile altrimenti il metodo fadeOut().
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della dissolvenza.
$(selector).fadeTo(speed,opacity,callback);
Il metodo jQuery fadeTo() permette di dissolvere un elemento fino a una data opacità (valore compreso tra 0 e 1).
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro opacity (richiesto) specifica la dissolvenza fino a una data opacità (valore compreso tra 0 e 1).
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della dissolvenza.
Slide
$(selector).slideDown(speed,callback);
Il metodo jQuery slideDown() viene utilizzato per fare apparire un elemento facendolo scorrere verso il basso.
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro di callback facoltativo è una funzione da eseguire dopo il completamento dello scorrimento.
$(selector).slideUp(speed,callback);
Il metodo jQuery slideDown() viene utilizzato per scomparire un elemento facendolo scorrere verso l'alto.
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro di callback facoltativo è una funzione da eseguire dopo il completamento dello scorrimento.
$(selector).slideToggle(speed,callback);
Il metodo jQuery slideToggle() applica all'elemento il metodo slideDown() se l'elemento non è visibile altrimenti il metodo slideUp().
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro callback è facoltativo ed è una funzione da eseguire dopo il completamento della dissolvenza.
Animazioni
$(selector).animate({params},speed,callback);
Il metodo jQuery animate () viene utilizzato per creare animazioni personalizzate.
Il parametro (obbligatorio) params definisce le proprietà CSS da animare.
Il parametro facoltativo speed specifica la durata dell'effetto. Può assumere i seguenti valori: "slow", "fast" o un numero (millisecondi).
Il parametro di callback è facoltativo ed è una funzione da eseguire dopo il completamento dell'animazione.
$gameBoard.on('click', function(e) {
var $cerchio = $('#cerchio');
var x = e.pageX - ($cerchio.width()/2);
var y = e.pageY - ($cerchio.height()/2);
var size = Math.round(Math.random() * 100 + 50);
var op = Math.random() * 0.5 + 0.5;
$cerchio.animate({
top: y + 'px',
left: x + 'px',
opacity: op,
width: size + 'px',
height: size + 'px'
}, 1500);
})
Utilizzo di valori relativi
È anche possibile definire i valori relativi (valori relativi al valore corrente della proprietà css dell'elemento).
Questa operazione viene eseguita inserendo += o -= davanti al valore:
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Utilizzo di valori predefiniti
Quando l'animazione serve a nascondere o mostrare un elemento si possono specificare come valori delle proprietà da animare show, hide o toggle:
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Utilizzare la coda delle animazioni
Per impostazione predefinita, jQuery utilizza per le animazioni una coda.
Ciò significa che se si eseguono più chiamate ad animate(), jQuery mette queste chiamate in una coda "interna", quindi le esegue uno dopo l'altra, attendendo che quella precedente sia terminata.
Quindi, se si desidera eseguire diverse animazioni in sequenza, possiamo approfittare della funzionalità coda e semplicemente scriverle una di seguito all'altra:
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
$(selector).stop(stopAll,goToEnd);
Il metodo jQuery stop() viene utilizzato per interrompere un'animazione o un effetto prima che sia terminato.
Il metodo stop() funziona con tutti i metodi che gestiscono effetti: tra cui slide, fade e animazioni personalizzate.
Il parametro facoltativo stopAll specifica se anche la coda di animazione deve essere eliminata. Il valore predefinito è false, ovvero solo l'animazione attiva verrà interrotta, consentendo l'esecuzione delle animazioni collocate in coda.
Il parametro facoltativo goToEnd specifica se completare o meno l'animazione corrente immediatamente. Il valore predefinito è false, cioè l'animazione viene interrotta immediatamente.
$("#stop").click(function(){
$("#panel").stop();
});