Effetti

Indice

Introduzione
⤽
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 Libreria
⤽
Gli effetti più comuni sono già incorporati nella libreria sotto forma di metodi:

  •  $.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.
    • 6.1: Utilizzo di base di un effetto incorporato
    ⤽
    [code lang=”javascript”] $(‘h1’).show();
    [/code]
    Cambiare la durata degli effetti
    ⤽
    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
    ⤽
    [code lang=”javascript”] $(‘h1’).fadeIn(300); // dissolvenza in 300ms
    $(‘h1’).fadeOut(‘slow’); // utilizzo di una definizione di velocità interna
    [/code]
    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”.
    [code lang=”javascript”] speeds: {
    slow: 600,
    fast: 200,
    // Velocità predefinita
    _default: 400
    }

    [/code]
    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
    ⤽
    [code lang=”javascript”] jQuery.fx.speeds.blazing = 100;
    jQuery.fx.speeds.turtle = 2000;
    [/code]
    Eseguire un'azione quando un effetto è stato eseguito
    ⤽
    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
    ⤽
    [code lang=”javascript”] $(‘div.old’).fadeOut(300, function() { $(this).remove(); });
    [/code]
    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
    ⤽
    [code lang=”javascript”] var $thing = $(‘#nonexistent’);

    var cb = function() {
    console.log(‘realizzato!’);
    };

    if ($thing.length) {
    $thing.fadeIn(300, cb);
    } else {
    cb();
    }
    [/code]

    Effetti personalizzati con $.fn.animate
    ⤽
    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
    ⤽
    [code lang=”javascript”] $(‘div.funtimes’).animate(
    {
    left : "+=50",
    opacity : 0.25
    },
    300, // durata
    function() { console.log(‘done!’); // retrochiamata
    });
    [/code]
    Le proprietà relative al colore non possono essere animate con il metodo $.fn.animate, ma è possibile farlo attraverso l’estensione color plugin.
    Più tardi nel libro si discuterà l’uso delle estensioni.
    Easing
    ⤽
    [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à

    ⤽
    [code lang=”javascript”] $(‘div.funtimes’).animate(
    {
    left : [ "+=50", "swing" ],
    opacity : [ 0.25, "linear" ] },
    300
    );
    [/code]
    Gestione degli Effetti
    ⤽
    jQuery offre diversi strumenti per gestire le animazioni.
    $.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.
    [code lang=”javascript”] $(‘h1’).show(300).delay(1000).hide(300);
    [/code]
    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.
    Esercizi
    ⤽
    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:

    • 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.

    Creare una Menù a tendina (Drop Down)
    ⤽
    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:

    • 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).

    Creare un Slideshow
    ⤽
    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).