Ciclare il contenuto di un div in dissolvenza

[artorius]

D'accordo:

metti di fare un HTML come questo:

<div id="MyCycling">
   <span>Buon </span>
   <span>Natale </span>
   <span>! </span>
</div>

Come puoi vedere ci sono 3 span, i quali, essendo display: inline;, vengono stampati come se non ci fossero.
A questo punto li ottieni e li mostri uno alla volta.
(Nota, ti faccio un esempio con Mootools, perché non ho voglia di pensare al JS nativo)

var spans, counter = 0;
window.addEvent('domready', function(){
   spans = $$('#MyCycling span').setStyles({'display': 'none', 'opacity' : 0});

   spans[counter].setStyle('display', 'inline').tween('opacity', 1);
   apply.periodical(3000);
});

function apply(){
   spans[counter].get('tween').start('opacity', '0').chain(function(){
       spans[counter].setStyle('display', 'none');
       var next = counter < spans.length - 1 ? counter + 1 : 0;       
       spans[next].setStyle('display', 'inline').tween('opacity', 1);
       counter = next;
   })
}

Funziona perché l'ho provato