JQuery, come possiamo implementare effetti dinamici con JQuery

Con JQuery puoi creare effetti dinamici, animazioni e dissolvenze agendo sugli elementi di una pagina HTML.

In questo articoli vedremo come utilizzare diversi metodi JQuery per la generazione di animazioni.

Nascondi e mostra un elemento HTML

Metodi hide() e show()

Il metodo hide() imposta semplicemente lo stile in linea display: none per gli elementi selezionati. Al contrario, il metodo show() ripristina le proprietà di visualizzazione. 

Vediamo un esempio:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

Nel primo caso viene nascosto il paragrafo quando si clicca sul bottone (hide-btn), nel secondo caso viene mostrato il paragrafo quando si clicca sul bottone (show-btn).

È anche possibile specificare il parametro di durata, per rendere animato l’effetto mostra (show) e nascondi (hide) per un periodo di tempo.

Le durate possono essere specificate utilizzando una delle stringhe predefinite 'slow' o 'fast', o in un numero di millisecondi, per una maggiore precisione; valori più alti indicano animazioni più lente.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

La stringa predefinita 'fast' indica una durata di 200 millisecondi, mentre la stringa 'slow' indica la durata di 600 millisecondi.

Possiamo specificare una funzione di callback da eseguire dopo il completamento del metodo show() o dell’ hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

Il metodo Toggle

Il metodo jQuery toggle() mostra o nasconde gli elementi in modo tale che se l’elemento è inizialmente visualizzato, sarà nascosto; viceversa se nascosto, verrà visualizzato (praticamente ne alterna la visibilità).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Allo stesso modo, puoi specificare il parametro duration per il metodo toggle(), in modo tale da animare il passaggio tra visibile e nascosto, come i metodi show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

Allo stesso modo, puoi anche specificare una funzione di callback per il metodo toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

Effetti di dissolvenza jQuery

Metodi fadeIn() e fadeOut()

È possibile utilizzare i metodi jQuery fadeIn()e fadeOut() per visualizzare o nascondere gli elementi HTML, aumentando o diminuendo gradualmente la loro opacità e creare un effetto di dissolvenza.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Come altri metodi di effetti jQuery, puoi eventualmente specificare la durata o il parametro di velocità per i metodi fadeIn()e fadeOut(), in modo tale da controllare la durata della dissolvenza. Le durate possono essere specificate usando una delle stringhe predefinite 'slow' o 'fast', o in un numero di millisecondi; valori più alti indicano animazioni più lente.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

l’effetto dei metodi fadeIn() / fadeOut() è simile a show() / hide(), ma a differenza del metodi show() / hide(), i primi animano solo l’opacità degli elementi di destinazione e non ne animano le dimensioni.

Inoltre è possibile specificare una funzione di callback da eseguire dopo il completamento dei metodi fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

Metodo fadeToggle()

Il metodo jQuery fadeToggle() visualizza o nasconde gli elementi selezionati animando la loro opacità in modo tale che se l’elemento viene inizialmente visualizzato, verrà sfumato; se era nascosto, verrà visualizzato in dissolvenza (ovvero alterna l’effetto di dissolvenza).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Puoi anche specificare il parametro di durata per il  metodo fadeToggle() come per i metodi fadeIn() / fadeOut(), per controllare la durata o la velocità dell’animazione di dissolvenza.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

Anche il metodo fadeToggle() ha la possibilità di specificare una funzione di callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

Metodo fadeTo()

Il metodo jQuery fadeTo() è simile al metodo fadeIn(), ma a differenza del metodo fadeIn(), il metodo fadeTo() ti consente di sfumare gli elementi fino a un certo livello di opacità.

$(selector).fadeTo(speed, opacity, callback);

Il parametro obbligatorio opacity specifica l’opacità finale degli elementi di destinazione che può essere un numero compreso tra 0 e 1. Il parametro duration o speed è richiesto anche per questo metodo che specifica la durata della dissolvenza dell’animazione.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Effetti di scorrimento

Metodi slideUp() e slideDown()

Il metodo jQuery slideUp() e slideDown() vengono utilizzati per nascondere o mostrare gli elementi HTML diminuendo o aumentando gradualmente la loro altezza (cioè facendoli scorrere verso l’alto o verso il basso).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Come altri metodi di effetti jQuery, puoi facoltativamente specificare la durata o il parametro di velocità per i metodi slideUp() e slideDown() per controllare la durata dell’animazione della diapositiva. Le durate possono essere specificate usando una delle stringhe predefinite 'slow' o 'fast', o in un numero di millisecondi; valori più alti indicano animazioni più lente.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

È inoltre possibile specificare una funzione di callback da eseguire dopo il completamento del metodo slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

Metodo slideToggle()

Il metodo jQuery slideToggle() mostra o nasconde gli elementi selezionati animandone l’altezza in modo tale che se l’elemento viene inizialmente visualizzato, verrà fatto scorrere verso l’alto; se nascosto, verrà fatto scorrere verso il basso, ovvero alterna tra i metodi slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Allo stesso modo, puoi specificare il parametro di durata per il metodo slideToggle() come slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Allo stesso modo, puoi anche specificare una funzione di callback per il metodo slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

Effetti di animazione

Metodo animate()

Il metodo jQuery animate() viene utilizzato per creare animazioni personalizzate. Il metodo animate() viene in utilizzato per animare proprietà CSS numeriche, come ad esempio width, height, margin, padding, opacity, top, left ecc. ma le proprietà non numeriche come color o background-color non possono essere animate utilizzando la funzionalità jQuery di base.

La sintassi di base del metodo animate() è la seguente:

$(selector).animate({ properties }, duration, callback);

I parametri del metodo animate() hanno i seguenti significati:

• Il parametro delle proprietà obbligatorie definisce le proprietà CSS da animare.
• Il parametro facoltativo di durata specifica per quanto tempo verrà eseguita l’animazione. Le durate possono essere specificate usando una delle stringhe predefinite 'slow' o 'fast', o in un numero di millisecondi; valori più alti indicano animazioni più lente.
• Il parametro callback facoltativo è una funzione da chiamare una volta completata l’animazione.

Di seguito un semplice esempio del metodo animate() che anima un’immagine dalla sua posizione originale a destra di 300 pixel al clic del pulsante.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Puoi anche animare più proprietà di un elemento insieme contemporaneamente utilizzando il metodo animate(). Tutte le proprietà sono state animate contemporaneamente senza alcun ritardo.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Puoi anche animare le molteplici proprietà di un elemento una per una individualmente, in una coda utilizzando la funzione di concatenamento di jQuery.

L’esempio seguente mostra un’animazione jQuery in coda o concatenata, in cui ogni animazione verrà avviata una volta completata l’animazione precedente sull’elemento. Vedremo in un prossimo articolo la funzione di concatenazione.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

È inoltre possibile definire i valori relativi per le proprietà animate. Se un valore viene specificato con un prefisso += o -=, il valore di destinazione viene calcolato aggiungendo o sottraendo il numero specificato dal valore corrente della proprietà.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Oltre ai valori numerici, ogni proprietà può accettare le stringhe 'show', 'hide' e 'toggle'. Sarà molto utile in una situazione in cui vuoi semplicemente animare la proprietà dal suo valore corrente al valore iniziale e viceversa.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

Metodo stop()

Il metodo jQuery stop() viene utilizzato per arrestare le animazioni o gli effetti jQuery attualmente in esecuzione sugli elementi selezionati prima del completamento.

La sintassi di base del metodo stop() jQuery può essere data con:

$(selector).stop(stopAll, goToEnd);

I parametri nella sintassi precedente hanno i seguenti significati:

• Il parametro facoltativo booleano stopAll, specifica se rimuovere o meno l’animazione in coda. Il valore predefinito è false, ciò significa che solo l’animazione corrente verrà interrotta, il resto delle animazioni nella coda verrà eseguito successivamente.
• Il parametro booleano goToEnd facoltativo specifica se completare immediatamente l’animazione corrente. Il valore predefinito è false.

Ecco un semplice esempio che dimostra il metodo stop() in azione reale in cui è possibile avviare e arrestare l’animazione al clic del pulsante.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Ecco un altro esempio di questo metodo in cui, se fai di nuovo clic sul pulsante “Slide Toggle” dopo aver avviato l’animazione ma prima che sia completata, l’animazione inizierà immediatamente nella direzione opposta rispetto al punto di partenza salvato.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Durante la creazione dell’effetto al passaggio del mouse animato, uno dei problemi più comuni che potresti incontrare sono più animazioni in coda, quando posizioni e rimuovi rapidamente il cursore del mouse. Perché, in questa situazione, mouseenter gli mouseleave eventi vengono attivati ​​rapidamente prima del completamento dell’animazione. Per evitare questo problema e creare un effetto al passaggio del mouse piacevole e fluido, puoi aggiungere stop(true, true)alla catena del metodo, in questo modo:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

Callback

Le istruzioni JavaScript vengono eseguite riga per riga. Tuttavia, poiché l’effetto jQuery richiede del tempo per terminare, il codice della riga successiva potrebbe essere eseguito mentre l’effetto precedente è ancora in esecuzione. Per evitare che ciò accada, jQuery fornisce una funzione di callback per ciascun metodo di effetto.

Una funzione di callback è una funzione che viene eseguita una volta che l’effetto è completo. La funzione di callback viene passata come argomento ai metodi dell’effetto e in genere vengono visualizzati come ultimo argomento del metodo. Ad esempio, la sintassi di base del metodo dell’effetto jQuery slideToggle() con una funzione di callback che può essere specificata come segue:

$(selector).slideToggle(duration, callback);

Considera il seguente esempio in cui abbiamo posizionato le istruzioni slideToggle()e alert()una accanto all’altra. Se provi questo codice, l’avviso verrà visualizzato immediatamente dopo aver fatto clic sul pulsante di attivazione senza attendere il completamento dell’effetto di attivazione/disattivazione della diapositiva.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

Ed ecco la versione modificata dell’esempio precedente in cui abbiamo inserito l’istruzione alert() all’interno di una funzione di callback per il metodo slideToggle(). Se provi questo codice, il messaggio di avviso verrà visualizzato una volta completato l’effetto di attivazione/disattivazione della diapositiva.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Allo stesso modo, puoi definire le funzioni di callback per gli altri metodi di effetto jQuery, come show(), hide(), fadeIn(), fadeOut(), animate(), ecc.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Se provi il codice di esempio sopra, verrà visualizzato lo stesso messaggio di avviso due volte una volta per elemento <h1> e <p>, dopo aver fatto clic sul pulsante di attivazione.

BlogInnovazione.it