Mangiare Senza Glutine disponibile su App Store

Per altre informazioni scrivi a fabriziocaldarelli@negusweb.it

Fade In/Out di un div con JQuery

Da Programmazione Software.

Sembra una banalità, ma applicare alla lettera (cioè come da documentazione), le istruzioni necessarie per eseguire un fade in/out con jquery può avere dei risultati inaspettati.

Se supponiamo di avere un div con id="box" allora l'istruzione 

$('div#box').fadeOut(3000);

dovrebbe eseguire un fade out con durata 3000 ms. Tutto funziona correttamente su Firefox, mentre su Internet Explorer (almeno la v.8) no.

Infatti è necessario impostare (attenzione all'asterisco dopo div#box!) 

$('div#box *').fadeOut(3000);

oppure 

$('div#box div').fadeOut(3000);

se c'è un div interno

affinchè anche le immagini comprese nel div, qualora ce ne sia, sia soggette all'effetto fading.

Il risultato finale, compreso di callback di onload della window è: 

  1. <script language="javascript" type="text/javascript">
  2.  
  3.      $(document).ready(function(){
  4.           FadeOut();
  5.      });
  6.  
  7.      function FadeOut()
  8.      {                  
  9.             $('div#box div').fadeOut(3000, function() {
  10.                if ($(this).is('div#box_div_interno')) {
  11.                      // codice callback
  12.  
  13.                     // per raggiungere l'ennesimo div interno
  14.                     int n = 0;
  15.                     var el = $('div#box div:nth-child(n)');
  16.  
  17.                }
  18.  
  19.             });
  20.      }
  21. </script>
Estratto da "http://www.negusweb.it/wiki/Fade_In/Out_di_un_div_con_JQuery"
Strumenti personali
hobby
approfondimenti