PROGRAMMIAMO
JS - hide, show, toggle
Hide

Una delle cose che jQuery riesce a realizzare meglio sono le animazioni. In queste prime lezioni affronteremo alcune funzioni di base, mentre tratteremo dopo le animazioni più complesse.

Cominciamo con un metodo che abbiamo già visto in azione:

$("#blocco").hide();           // nasconde l'elemento con id #blocco

Nella sua forma più semplice l'uso del metodo hide è immediato: non occorrono parametri e l'elemento corrispondente viene nascosto.

ATTENZIONE: l'elemento viene nascosto (diminuiscono le sue dimensioni e la sua opacità) e alla fine la pagina viene ridisegnata come se l'elemento stesso non fosse presente. Non rimane nessuno spazio vuoto al posto dell'elemento. Tutti gli elementi adiacenti vengono riposizionati di conseguenza. Il metodo equivale all'applicazione dello stile display:none all'elemento.

In realtà il metodo hide può essere usato anche in modo più complesso. La sua sintassi generale è la seguente:

$(selettore).hide(speed,easing,callback)

Il primo parametro, speed, indica la velocità con la quale l'elemento deve scomparire dalla pagina. Esso può assumere i seguenti valori:

Scegliendo "fast" (o non scrivendo nulla, poiché questa è l'opzione di default) l'elemento scompare immediatamente. Con "slow" invece si ha una transizione più lenta. Infine è possibile indicare il numero di millisecondi di durata dell'animazione (cioè il numero di millisecondi che impiega l'elemento a scomparire).

Il parametro easing si riferisce all'accelerazione dell'animazione e ha due possibili valori:

Scegliendo "linear" l'animazione avviene a velocità costante: l'oggetto svanisce con progressione costante. Scegliendo invece "swing" (l'opzione di default) l'animazione è più naturale: all'inizio la velocità è lenta, poi accelera e infine rallenta di nuovo verso la fine. Oltre a queste due modalità base, nel repository dei plugin di jQuery è possibile scaricare molte altre possibilità di animazione, in grado di soddisfare qualsiasi esigenza (vedremo un esempio un po' più completo trattando del metodo animate).

L'ultimo parametro è una funzione di callback, cioè una funzione che deve essere chiamata al termine dell'animazione, cioè quando l'oggetto è completamente scomparso. La funzione di callback può essere una funzione esterna (e in questo caso, come abbiamo già visto in precedenza, bisogna inserirne il nome senza parentesi tonde) oppure, più frequentemente, una funzione anonima definita all'interno del metodo stesso, come mostra l'esempio qui sotto:

$( "#book" ).hide(
                "slow", function()
                        { alert( "Animazione terminata!" ); }
                        );

 

Show

Il metodo show, come suggerisce il nome, fa l'azione contraria di hide: cioè rende nuovamente visibile un oggetto che in precedenza non lo era. I suoi parametri sono gli stessi del metodo hide e hanno il medesimo significato:

$(selettore).show(speed,easing,callback)

 

Toggle

Il metodo toggle alterna la visibilità e invisibilità di un oggetto. In pratica il suo funzionamento è lo stesso di hide se l'oggetto è visibile (lo rende cioè invisibile) e di show se l'oggetto è invisibile (lo rende visibile).

I suoi parametri sono gli stessi dei metodi hide e show e hanno il medesimo significato:

$(selettore).toggle(speed,easing,callback)

 

Esempio finale

Per vedere in azione i metodi e i parametri precedenti, consideriamo ora questo esempio di script completo:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#avviso").html("Hide iniziato, velocità 2000 ms, swing");
        $("h1").hide(2000,"swing", function(){$("#avviso").html("Hide terminato");} );
    });
    $("#btn2").click(function(){
        $("#avviso").html("Show iniziato, velocità 4000 ms, linear");
        $("h1").show(4000,"linear", function(){$("#avviso").html("Show terminato");} );
    });
    $("#btn3").click(function(){
        $("#avviso").html("Toggle iniziato, parametri di default");
        $("h1").toggle(function(){$("#avviso").html("Toggle terminato");} );
    });
});
</script>
</head>
<body>
<h1>Mostra e nascondi</h1>
<p>Clicca su uno dei bottoni qui sotto:</p>
<p id="avviso"></p>
<button id="btn1">Hide</button>
<button id="btn2">Show</button>
<button id="btn3">Toggle</button>
</body>
</html>

Il lettore può provarne l'effetto qui sotto:

Mostra e nascondi

Clicca su uno dei bottoni qui sotto:

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it