Animazione CSS Loop con JQuery, come fare?

[LuckySevenRoX]

Salve, vi spiego il mio problema:
voglio realizzare una funzione che, dal momento dell'apertura della pagina, avvii un cambio di CSS continuo a intervalli di 1 secondo. Più precisamente, ho un'immagin di sfondo divisa a "sezioni" e con jquery faccio cambiare la posizione ogni tot secondi con "setTimeout" in questo modo:

setTimeout(function() {$("#logo").css({'background-position': '0px -80px'})} , 1500);
setTimeout(function() {$("#logo").css({'background-position': '0px -160px'})} , 2500);
setTimeout(function() {$("#logo").css({'background-position': '0px -240px'})} , 3500);

il mio problema è mandare questo codice in loop.. delay() con css() non funziona, e con setTimeout si presenta il problema dell'aumento dei secondi.. come posso fare?

[cavicchiandrea]

prova cosi:

$(document).ready(function(){
function animation()
});
function animation(){
$("#logo").animate({background-position : '0px -80px'}, 1500, function(){
$(this).animate({background-position : '0px -160px'}, 2500, function(){
$(this).animate({background-position : '0px -240px'}, 3500});
});
});
}
setTimeout(function(){
function animation()},1000)

cosi le animazioni dovrebbero essere sequenziali (finita la prima parte la seconda, etc...) se vuoi che partano assieme togli le funzioni finali (callback) per dubbi/sistemazioni leggi qui

[LuckySevenRoX]

ciao e grazie per la risposta.
non so se sbaglio qualcosa io, comunque il background-position funziona con un solo valore, se ne specifico due non va (background-position: 10px è ok, background position: 0px 10px non va).
Comunque il codice che mi hai suggerito mi esegue (giustamente) le animazioni "gradualmente", mentre a me serviva una cosa "a scatti".

Grazie ai tuoi consigli ho risolto in questo modo

 <script>
  function animation () {
  	$("#logo").animate({'background-position' : '0px'}, 0).delay(500).animate({'background-position' : '80px'}, 0).delay(500).animate({'background-position' : '160px'}, 0).delay(500).animate({'background-position' : '240px'}, 0).delay(500).animate({'background-position' : '240px'}, 0, function() { animation();});
  }
$(document).ready(function(){
	animation();
});

considerando però che dovrò inserire più animazioni di questo tipo nella stessa pagina, vorrei sapere se questo codice appesantisce molto il caricamento e se hai qualche consiglio per migliorarlo (così funziona comunque)

grazie

[cavicchiandrea]

A livello di prestazioni non saprei non sono cosi ferrato su jquery, per quanto concerne la pesantezza (in kb) non mi sembrerebbe poi dipende quante animazioni dovresti fare, l'utilizzo se funziona io credo sia corretto (altrimenti non funziona) per il riutilizzo se l'animazione è uguale per tutti potresti usare un selettore class al posto dell'id.