Effetti
Indice
⤽
Con jQuery, aggiungere effetti ad una pagina è facile. Questi effetti hanno una impostazione di default, ma si può anche fornire impostazioni personalizzate. E’ anche possibile creare animazioni impostando valori di proprietà specifici del CSS.
Per la documentazione completa sui diversi tipi di effetti si possono visitare http://api.jquery.com/category/effects/.
Effetti incorporati nella LibreriaPer la documentazione completa sui diversi tipi di effetti si possono visitare http://api.jquery.com/category/effects/.
⤽
Gli effetti più comuni sono già incorporati nella libreria sotto forma di metodi:
6.1: Utilizzo di base di un effetto incorporato
Cambiare la durata degli effetti
Effetti personalizzati con $.fn.animate$.fn.show
Visualizza l’elemento selezionato.$.fn.hide
Nasconde l’elemento selezionato.$.fn.fadeIn
In forma animata, modifica l’opacità dell’elemento selezionato al 100%$.fn.fadeOut
In forma animata, modifica l’opacità dell’elemento selezionato al 0%$.fn.slideDown
Consente di visualizzare l’elemento selezionato con un movimento a scorrimento verticale.$.fn.slideUp
Nasconde l’elemento selezionato con un movimento a scorrimento verticale.$.fn.slideToggle
Visualizza o nasconde l’elemento selezionato con un movimento a scorrimento verticale, a seconda che l’elemento sia correntemente visibile o meno.⤽
$('h1').show();
⤽
Con l’eccezione di $.fn.show e $.fn.hide, tutti i metodi hanno una durata predefinita dell’animazione di 400ms. Questo valore è possibile cambiarlo.
6.2: Impostare la durata degli effetti
Eseguire un'azione quando un effetto è stato eseguito6.2: Impostare la durata degli effetti
⤽
$('h1').fadeIn(300); // dissolvenza in 300ms $('h1').fadeOut('slow'); // utilizzo di una definizione di velocità interna
jQuery.fx.speeds
⤽
jQuery è un oggetto che contiene in jQuery.fx.speeds la velocità predefinita per la durata di un effetto, così come i valori per le definizioni “slow” e “fast”.
Pertanto, è possibile sovrascrivere o aggiungere nuovi valori all’oggetto. Per Esempio, quando si vuole cambiare l’effetto predefinito o aggiungere una velocità personalizzata.
6.3: Aumentare la velocità con jQuery.fx.speeds
speeds: { slow: 600, fast: 200, // Velocità predefinita _default: 400 }
6.3: Aumentare la velocità con jQuery.fx.speeds
⤽
jQuery.fx.speeds.blazing = 100; jQuery.fx.speeds.turtle = 2000;
⤽
Spesso, si desidera eseguire l’azione una volta che l’animazione sia finita — perché se si esegue l’azione prima che l’animazione sia terminata, possono alterare la qualità degli effetti o influenzare gli elementi che ne fanno parte. [Definizione: Le funzioni di retrochiamata (callback functions in inglese) forniscono un modo per eseguire codice quando un evento si è concluso.] In questo caso, l’evento che risponderà alla funzione sarà la conclusione dell’animazione. All’interno della funzione di ritorno, la parola chiave this fa riferimento all’elemento cui è stato eseguito l’effetto, e come accade con gli eventi, è possibile trasformarlo in un oggetto jQuery utilizzando $(this).
6.4: Eseguire del codice quando un'animazione è completata
Si noti che se la selezione non restituisce alcun elemento, la funzione non potrà mai essere eseguita. Questo problema può essere risolto controllando se la selezione restituisce un oggetto; e in caso contrario eseguire la funzione di retrochiamata immediatamente.
6.5: Eseguire una funzione di retrochiamata, anche se non c'è nessun elemento da animare
6.4: Eseguire del codice quando un'animazione è completata
⤽
$('div.old').fadeOut(300, function() { $(this).remove(); });
6.5: Eseguire una funzione di retrochiamata, anche se non c'è nessun elemento da animare
⤽
var $thing = $('#nonexistent'); var cb = function() { console.log('realizzato!'); }; if ($thing.length) { $thing.fadeIn(300, cb); } else { cb(); }
⤽
Le animazioni sono possibili realizzarle utilizzando il metodo $.fn.animate. Questo metodo permette realizzare un’animazione impostando i valori alle proprietà CSS o cambiando il loro valore corrente.
6.6: Effetti personalizzati con $.fn.animate
Gestione degli Effetti6.6: Effetti personalizzati con $.fn.animate
⤽
$('div.funtimes').animate( { left : "+=50", opacity : 0.25 }, 300, // durata function() { console.log('done!'); // retrochiamata });
Le proprietà relative al colore non possono essere animate con il metodo
Più tardi nel libro si discuterà l’uso delle estensioni.
Easing$.fn.animate
, ma è possibile farlo attraverso l’estensione color plugin.Più tardi nel libro si discuterà l’uso delle estensioni.
⤽
[Definizione: Il concetto di Easing descrive il modo come un effetto si verifica – cioè, se la velocità durante l’animazione è costante o meno]. JQuery comprende solo due metodi di allentamento: swing e linear. Per ulteriori transizioni naturali nelle animazioni, ci sono molte estensioni che lo permettono.
Dalla versione 1.4 della libreria, è possibile impostare il tipo di transizione per ogni proprietà utilizzando il metoso $.fn.animate.
6.7: Transizione easing per ogni proprietà
⤽
$('div.funtimes').animate( { left : [ "+=50", "swing" ], opacity : [ 0.25, "linear" ] }, 300 );
⤽
jQuery offre diversi strumenti per gestire le animazioni.
Esercizi$.fn.stop
⤽
Interrompe le animazioni che sono in esecuzione sull’elemento selezionato.
$.fn.delay
⤽
Attende un periodo di tempo specificato prima di eseguire l’animazione successiva.
$('h1').show(300).delay(1000).hide(300);
jQuery.fx.off
⤽
Se il valore è vero (true), non ci saranno transizioni per le animazioni e agli elementi si stabilirà lo stato finale dell’animazione. Questo metodo può essere particolarmente utile quando si lavora con i vecchi browser.
⤽
Visualizzare il testo nascosto
⤽
Aprire il il file /exercises/index.html nel browser web. Eseguire ejericio utilizzando il file /exercises/js/blog.js. Il compito è quello di aggiungere un po ‘interattività alla sezione blog della pagina:
Creare una Menù a tendina (Drop Down)- Cliccando su uno qualsiasi dei titolari del div #blog, si dovrebbe visualizzare il testo con un effetto scorrevole;
- Facendo clic su un altro titolo, si dovrebbe nascondere il paragrafo mostrato con un effetto di scorrimento e mostrare di nuovo il paragrafo corrispondente anche con un effetto di scorrimento.
Suggerimento: Non dimenticare di usare il selettore :visible.
⤽
Aprire il file /exercises/index.html nel browser web. Eseguire ejericio utilizzando il file /exercises/js/navigation.js. Il compito è quello di visualizzare le voci di menu in cima alla pagina:
Creare un Slideshow - Passando il mouse su una voce del menu, si dovrebbe visualizzare un sottomenu se esiste;
- Quando non è posizionato sopra un item, il sottomenu si dovrebbe nascondere.
Per fare questo, utilizzare il metodo $.fn.hover per aggiungere o rimuovere una classe al sottomenu per controllare se deve essere nascosto o visibile (Il file /exercises/css/styles.css include una classe “hover” per questo scopo).
⤽
Aprire il file /exercises/index.html nel browser web. Eseguire l’esercizio utilizzando il file /exercises/js/slideshow.js. Il compito è quello di aggiungere uno slideshow alla pagina con JavaScript.
- Spostare l’elemento #slideshow alla parte superiore della pagina;
- Scrivere un codice per la visualizzazione degli items in maniera ciclica, mostrando un item per alcuni secondi, poi nasconderlo con un effetto fade out e mostrare il seguente item con l’effetto di dissolvenza fade in;
- Una volta raggiunto l’ultimo elemento della lista, ricominciare con il primo;
Per una sfida più grande, creare un area di navigazione sotto lo slideshow che mostra quante immagini ci sono e su quale si trova (suggerimento: $.fn.prevAll può essere utile).
Ancora nessun commento