jQuery hide()

jQuery hide() method – In questa lezione studieremo questo metodo che serve a nascondere uno o più elementi in una pagina web.


Metodo jQuery Hide() come si utilizza

Il metodo hide() come detto prima nasconde uno o più elementi. Per chi ha dimestichezza con i CSS3, ha la stessa funzionalità della proprietà display:none.

La sintassi del metodo è questa:

selettore.hide(velocità, modalità, funzione)

Così come abbiamo specificato nel metodo slideToggle() visto nell’articolo precedente i parametri hanno queste impostazioni:

Velocità – indica la velocità con cui nascondere un oggetto. I valori che può assumere sono: slow, fast, normal,. o anche valori numerici in millisecondi. Ad esempio 400 viene considerato normal. Valori maggiori rallentano la velocità dell’effetto e viceversa i valori minori. Ad esempio un possibile uso può essere hide(“fast”).

Modalità – La modalità può essere swing che vuol dire che la velocità è lenta all’inizio e alla fine dell’effetto, ma veloce nel mezzo. Oppure linear che invece è il valore di default che indica una velocità costante per tutto il tempo.

Function(), indica la funzione da eseguire quando si attiva il metodo.

I parametri indicati sono opzionali e si possono anche utilizzare singolarmente.


Esempio di utilizzo del metodo hide()

Vediamo questo primo semplice esempio d’uso del metodo hide().

Cliccate sul pulsante sotto, noterete che si nasconderà il testo Benvenuti su Coding Creativo. Ma questa volta, a differenza dell’esempio precedente con slideToggle(), il testo non ricompare cliccando sul pulsante.

Benvenuti su Coding Creativo


Questo semplice esercizio sull’uso del jQuery hide() method si realizza intanto includendo la libreria jQuery nella pagina web:

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Dopo aggiungeremo semplicemente il pulsante con il livello da nascondere.

<div class="testo">Benvenuti su Coding Creativo</div>
<button id="nascondi">Nascondi</button>

E infine il nostro semplicissimo script che fa uso del metodo hide():

<script type="text/javascript">
$(document).ready(function(){
  $("#nascondi").click(function(){
    $(".testo").hide("800");
  });
});
</script>

Notate l’uso dei selettori.

In questo esempio si è deciso di nascondere un livello, ma potremmo fare l’esempio su qualsiasi elemento: un paragrafo, una textarea, un campo di input, ecc…

Provate pure voi a fare degli esempi.

In questa lezione abbiamo visto un uso basilare del jQuery hide() method, nella prossima vedremo come si utilizza il metodo show().

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript


Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *