jQuery fadeIn()

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

La sintassi infatti è questa:

$(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, noterete un effetto dissolvenza.

Benvenuti su Coding Creativo

Per realizzare questo esempio ho inserito al solito la nostra libreria jQuery:

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

Dopo ho inserito nella pagina web il livello che sarà nascosto o scoperto i due pulsanti, che si possono anche definire trigger. I pulsanti se cliccati fanno parire 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.

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

<script type="text/javascript">
$(document).ready(function(){
  $("#nascondi").click(function(){
    $(".testo").fadeOut(200);
  });
  $("#scopri").click(function(){
     $(".testo").fadeIn(1000);
  });
});
</script>

Fate la prova ad impostare le varie velocità e anche la modalità swing per capire la differenza: fadeIn(‘swing’).


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

Facciamo un secondo esempio per testare la velocità dell’effetto a dissolvenza con il metodo fadedIn().

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



Per realizzare questo effetto, creo tre livelli in html e a seguire 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 per i tre livelli, dove è importante specificare la proprietà display:none, in modo tale da renderli invisibili prima che si verifichi l’evento.

<style type="text/css">
.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;
  }
</style>

Infine realizziamo il nostro script per verificare la differenza dell’effetto.

<script type="text/javascript">  
$(document).ready(function(){  
    $("#effetti").click(function(){  
        $("#div1").fadeIn();  
        $("#div2").fadeIn(100);  
        $("#div3").fadeIn(3000);  
    });  
});  
</script> 

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.

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 *