JQuery: ripetere ciclicamente un'animazione.

[trez]

Ciao a tutti,
devo mettere delle scritte che appaiano e si dissolvano una successivamente all'altra che si ripetano in modo ciclico seguendo l'ordine dato.

Ho provato il seguente codice, ma oltre a non funzionare, fa delle cose terrificanti!

$(document).ready(function(){
	$("#news-scroller").css("opacity","0");
	/*
	var myArray = [
		"21° Mostra delle torte - 15 Giugno 2011",
		"http://Appuntamento sculturesco al l... 6 Luglio 2011",
		"Mostra dei vulcani spenti - 43 Agosto 2066"
		];
	
	$.each(myArray, function(i,val){
		
		$("#news-scroller").html(val).stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
		});
	*/
	
	$("#news-scroller").html("21° Mostra delle torte - 15 Giugno 2011").stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
	$("#news-scroller").html("http://Appuntamento sculturesco al l... 6 Luglio 2011").stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
	$("#news-scroller").html("Mostra dei vulcani spenti - 43 Agosto 2066").stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
	
	
	});//DOM

Grazie per l'aiuto!

[trez]

Correggo il codice (che non funziona comunque!):

$(document).ready(function(){
	$("#news-scroller").css("opacity","0");
	
	var myArray = [
		"21° Mostra delle torte - 15 Giugno 2011",
		"http://Appuntamento sculturesco al l... 6 Luglio 2011",
		"Mostra dei vulcani spenti - 43 Agosto 2066"
		];
	
	$.each(myArray, function(i,val){
		
		$("#news-scroller").html(val).stop().animate({ opacity: 1.0 }, 1500).delay(2000).animate({ opacity: 0 }, 1500);
		});
	
	
	
	});//DOM

[Vindav]

potresti provare con una funzione ricorsiva, vado ad intuito lascio a te i test sul codice
ecco una bozza.

var myArray = [
        "21° Mostra delle torte - 15 Giugno 2011",
        "http://Appuntamento sculturesco al l... 6 Luglio 2011",
        "Mostra dei vulcani spenti - 43 Agosto 2066"
        ];

$(document).ready(function(){
    $("#news-scroller").css("opacity","0");
    myAnimate(0);
});

function myAnimate(i){
    $("#news-scroller").html(myArray[i]).animate({ opacity: 1.0 }, 1500,function(){$("#news-scroller").animate({opacity: 0},1500);myAnimate(++i)});
}

[trez]

Grazie Vindav!
Il tuo codice funziona (perché non ci ho pensato prima!!!) ma c'è comunque qualcosina da risolvere perché fa come una specie di animazione contraria, ovvero:

- compare la scritta ( di colpo);
- fade-out;
- fade-in;
- cambia la scritta

Quando invece dovrebbe essere:
- fade-in;
- fade-out;
- cambia la scritta (in modo che non si veda il cambio;

Il fatto è che il codice che hai messo è logicamente corretto, ma l'effetto hce ottengo non è quello dato; non capisco come mai.

[trez]

FERMI TUTTI!
Ho risolto:

function myAnimate(i){
	if(i == myArray.length){ i = 0;}
    
	$("#news-scroller").animate({ opacity: 1.0 }, 2500).animate({opacity: 0},2500,function(){
		$("#news-scroller").html(myArray[i]);
		myAnimate(++i);
		});
	}//myAnimate

Grazie ancora Vindav!