Effetto dissolvenza.

**laugher** · 08-12-2013, 22:42

Dovendo inserire piu' immagini che compaiono nella casella di una tabella con effetto dissolvenza ho usato il programma xfade.js che ho scaricato da voi (e di cui ho verificato il percorso con ctrl u).

Ho inserito queste istruzioni.

codice:

           <script type="text/javascript"> 
$(document).ready(function() {
  $('#photos').xfade({height: 430});
  $('#news').xfade({height: '1em', effect: 'slide'});
});
</script> 

<td>
    <ul id=news>
        <li><a>Sovrappeso? Fai il test e scopri il tuo peso forma.</a></li>
        <li><a>Prova riuscita.</a></li>
    </ul>    
        
        </td>

Per arrivare al risultato voluto manca però qualcosa perchè le scritte non compaiono in dissolvenza ma una sotto l'altra.
Sapete aiutarmi per caso?

Grazie mille.

**laugher** · 09-12-2013, 03:05

Trovato. Il programma che crea dissolvenza a beneficio di quanti lo cercassero è questo:

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rotating Banners/Images</title>
<script src="//localhost/laugher.it/wp-content/plugins/jquery.js"></script>
</head>

<body>
<style type="text/css">
      #banners
      {
          position: relative;
      }
      #banners img
      {
          position: absolute;
          z-index: 1;
      }
      #banners img.active
      {
          z-index: 3;
      }

</style>    

<div id="banners">
    <img src="//localhost/laugher.it/wp-content/themes/twentythirteen/images/miadieta.png" class:"active" />
    <img src="//localhost/laugher.it/wp-content/themes/twentythirteen/images/llorente.png" />
    <img src="//localhost/laugher.it/wp-content/themes/twentythirteen/images/headerface.png" />
</div>

<script type="text/javascript">
    $(document) .ready(function()
    {
        setInterval(function()
        {
            
            var active = $('#banners');
            
            
            
            if(active.next().length >0)    
                var next = active.next();
            else
                var next = $('#banners img:first')
                next.css('z-index', '2')
                active.fadeOut(1000, function()
                {
                    active.css('z-index', '1').show().removeClass('active');
                    next.css('z-index','3').addClass('active')
                });
        },3000);
    });

</script>
</body>
</html>

Discussione: Effetto dissolvenza.

Strumenti discussione

Ricerca discussione

Visualizza

Effetto dissolvenza.

Permessi di invio