Mangiare Senza Glutine disponibile su App Store

Per altre informazioni scrivi a fabriziocaldarelli@negusweb.it

Fade In/Out di un div con JQuery: differenze tra le versioni

Da Programmazione Software.
(Creata pagina con '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 inaspetta...')
 
 
Riga 12: Riga 12:
  
 
  $('div#box '''*'''').fadeOut(3000);  
 
  $('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.
 
affinchè anche le immagini comprese nel div, qualora ce ne sia, sia soggette all'effetto fading.
Riga 26: Riga 32:
 
     function FadeOut()
 
     function FadeOut()
 
     {                   
 
     {                   
      $('div#box *').fadeOut(3000);  
+
            $('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>
 
</script>
 
</source>
 
</source>

Versione attuale delle 08:42, 16 set 2010

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>