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 è:

<script language="javascript" type="text/javascript">
 
     $(document).ready(function(){
          FadeOut();
     });
 
     function FadeOut()
     {                  
            $('div#box div').fadeOut(3000, function() {
               if ($(this).is('div#box_div_interno')) {
                     // codice callback
 
                    // per raggiungere l'ennesimo div interno
                    int n = 0;
                    var el = $('div#box div:nth-child(n)');
 
               }
 
            });
     }
</script>