jQuery Array fadeIn non funziona

Sto cercando di dissolvenza in un elemento fadeOut nell’array su un div. Sto cercando di farlo funzionare in un modo dissolvenza. Quindi il primo elemento si dissolve in soggiorni per 3 secondi, poi svanisce, quindi il prossimo elemento si dissolve, 3seocnds si dissolvono e così via ….. perché è sbagliato il mio codice. Controlla http://jsfiddle.net/Fpu2E/1/

Il codice che stai usando non funzionerà per vari motivi: avere zero ritardi tra chiamare fadeOut e fadeIn significa che non otterrai il ritardo di 3 secondi che stai cercando tra la dissolvenza in fadeOut e in uscita e che chiamare entrambe le funzioni porta a alcuni strani effetti con la coda effetti jQuery.

Un’opzione migliore sarebbe utilizzare una funzione ricorsiva insieme al delay per fare ciò:

 var div = $('div').hide(), news = ['news1', 'news2', 'news3'], count = 0; function changeNews() { div.fadeIn(3000).delay(3000).fadeOut(3000, function() { changeNews(); }).text(news[count++]); } changeNews(); 

Una semplice demo di questo può essere trovata qui: http://jsfiddle.net/Fpu2E/4/

Questo funziona …

 var news = ['news1', 'news2', 'news3'], count = news.length, currentItem = 0; showNextItem = function() { $('div').text(news[currentItem++]).fadeIn(3000, function() { var element = $(this); setTimeout(function() { element.fadeOut(1000, function() { if (currentItem < count) { showNextItem(); } }); }, 3000); }); }; showNextItem(); 

jsFiddle .