Come nascondere un elemento in jQuery
Per far scomparire e nascondere un elemento in jQuery utilizzo il metodo hide()
hide(durata, funzione)
Il metodo hide ha due parametri facoltativi
- Durata
Imposta l'intervallo di tempo in millisecondi dell'effetto scomparsa. Di default è 400 ms. - Funzione
In questo parametro posso indicare una funzione da eseguire al termine dell'effetto scomparsa.
Questo metodo nasconde un elemento css dalla pagina html in modo progressivo o istantaneo.
Un esempio pratico
Questo documento html include il codice jQuery con l'effetto hide()
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width:100px;
height:100px;
text-align:center;
background:#f00;
font-size:14px;
}
#clickme { width:100px; border:1px solid #000; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="clickme">Click here</div>
<br>
<div id="box">my box</div>
<p>Hello World!</p>
<script>
$( "#clickme" ).click(function() {
$("#box").hide();
});
</script>
</body>
</html>
Quando l'utente clicca con il mouse sull'elemento css con id=clickme, lo script nasconde quasi istantaneamente l'elemento css con id=box.
Per rallentare l'effetto scomparsa imposto una durata di 5000 ms
<script>
$( "#clickme" ).click(function() {
$("#box").hide(5000);
});
</script>
Ora l'effetto scomparsa avviene progressivamente in cinque secondi.
