jQuery fadeIn(), metodo fadeIn(), fadeOut(), show()

jQuery fadeIn() method serve, non solo a mostrare un elemento, ma anche ad applicare un effetto dissolvenza. Questo metodo infatti è molto simile al metodo show(), così come il metodo fadeOut() è simile a hide().

La sintassi è dunque la seguente:

$(selettore).fadeIn(velocità, modalità, funzione)

$(selettore).fadeOut(velocità, modalità, funzione)

Ricordiamo inoltre che i parametri indicati sono opzionali e si possono anche utilizzare singolarmente.

Esempio di utilizzo di jQuery fadeIn()

Ripetiamo lo stesso esempio che abbiamo già trattato con i metodi hide() e show() in questo tutorial: jQuery show(), così da capirne la differenza.

Cliccate quindi sui due pulsanti, mostra e nascondi, in modo da applicare l’effetto dissolvenza.

Benvenuti su Coding Creativo

Per realizzare questo esempio, prima del file JavaScript che contiene il metodo fadeIn(), ho inserito al solito la libreria jQuery, vi allego il link sotto:

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

Dopo, nella pagina html, ho inserito un livello (div) che sarà nascosto o scoperto, grazie ai due pulsanti, che si possono anche definire trigger. Infatti, se cliccati, i pulsanti faranno partire un’azione.

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

Poi costruisco la mia semplice funzione in un file JavaScript a parte.

Ecco quindi il codice per realizzare questo semplice esempio che utilizza il jQuery fadeIn() method ed il fadeOut().

$(document).ready(function(){
  $("#nascondi").click(function(){
    $(".testo").fadeOut(200);
  });
  $("#scopri").click(function(){
     $(".testo").fadeIn(1000);
  });
});

Ho impostato il tempo a piacere. Fate la prova ad impostare le varie velocità e anche la modalità swing per capire la differenza.

Esempio 2 per testare le varie velocità del metodo fadeIn()

Facciamo un secondo esempio per testare la velocità dell’effetto a dissolvenza utilizzando i metodo precedenti,

Cliccate sul pulsante sotto, vedrete apparire tre box che si coloreranno con effetto dissolvenza e con tempi diversi.

Possiamo notare subito che il metodo fadeIn() ha delle velocità diverse.

Cominciamo a realizzare questo effetto, creando innanzitutto la pagina html in cui inserisco tre livelli (div) con id diverso. A seguire inserisco poi un pulsante (trigger) su cui attivare l’evento.

<div id="div1" class="box1"></div>
<div id="div2" class="box2"></div> 
<div id="div3" class="box3"></div> 
<button id="effetti">Differenza effetti</button>

Dopo creiamo la formattazione CSS per i tre livelli (div), dove è importante specificare la proprietà display:none, in modo tale da renderli invisibili prima che si verifichi l’evento. Su questi elementi agirà il metodo fadeIn().

.box1 {  
	width:50px;
	height:50px;
	background-color:#a4cef8;
	display:none;
  }
  .box2 {  
	width:50px;
	height:50px;
	background-color:#1058a1;
	display:none;
  }
   .box3 {  
	width:50px;
	height:50px;
	background-color:#999999;
	display:none;
  }

Infine realizziamo il nostro script, in un file JavaScript a parte, ed inserismo il collegamento dello script nel file html. In questo modo abbiamo ottenuto il nostro effetto.

$(document).ready(function(){  
    $("#effetti").click(function(){  
        $("#div1").fadeIn();  
        $("#div2").fadeIn(100);  
        $("#div3").fadeIn(3000);  
    });  
});

Chiaramente quelli mostrati sono solo dei semplicissimi esempi di utilizzo del metodo jQuery fadeIn().

Questi effetti sono molto utilizzati ad esempio per lo slider di immagini, di cui farò un esempio di utilizzo nel prossimo articolo.

Lezione precedente: jQuery hover()

Lezione successiva: jQuery eq()