animare immagine senza fluidità

[iacoposk8]

ciao a tutti! ho questa immagine, vorrei simulare la camminata di questo robottino, non so se è possibile, ma con jquery se uso animate e gli dico: backgroundPosition: '-558px 0px' mi sposterà l'immagine da sinistra verso destra pixel per pixel... non c'è modo di dirgli sposta l'immagine di 70px per volta per esempio? perchè senò non rende l'idea della camminata... grazie

[sharkdrew]

function move(){
setTimeout(function(){
$("#img_robottino").css("background-position","70px 0px");
},100);
setTimeout(function(){
$("#img_robottino").css("background-position","0px 0px");
},200);
setTimeout(function(){
move();
},201);
}

dopo 100 millisecondi (puoi cambiare questo valore per aumentare o diminuire la velocità con cui la bg position cambia) il suo bg position si mette a 70px 0px. dopo altri 200 torna normale e così all'infinito...prova dovrebbe andare per fare quello che dici tu...

[iacoposk8]

perfetto! grazie mille ora provo a mettere i timeout in un for così se ho bisogno di mettere un timeout in più basta cambiar un numer grazie!

[iacoposk8]

mmm... mi sa che non a casa tu non hai messo il for o un ciclo... perchè sto vedendo don un alert che mi stampa 10 volte lo stesso risultato... perchè io il position mettendolo in un for l'ho messo in una variabile che incrementa di 70 agni volta... e stampa 10 volte l'ultimo risultato che deve ottenere... se si può col for ditemi come, senò lo copio 10 volte che ho visto funziona

[deepika1471]

no spam!

[sharkdrew]

scusa, non ho capito il tuo problema...






-------------------------
Sito di Giochi Gratis! da vedere!
http://frostgames.altervista.org/

[iacoposk8]

a me sarebbe piaciuto fare una cosa tipo

var sposta, n=10;
function move(){
     for(var i=1;i<=n;i++)
     {
          setTimeout(function(){
               sposta=70*i;
               $("#img_robottino").css("background-position", sposta+"px 0px");
          },i*100);
     }
}

così facevo la stessa cosa con meno codice, perchè de dovessi farlo per 100 volte diventava impegnativo... però non me lo fa... ho notato (mettendo un alert(sposta); nel setTimeout che con un codice del genere stamperebbe con l'alert 10 volte il numero 700

[sharkdrew]

Prova mettendo .css{"background-position","+=70px 0px"}






-------------------------
Sito di Giochi Gratis! da vedere!
http://frostgames.altervista.org/

[iacoposk8]

forse ho capito come funziona... il setTimeout è come un mondo a parte che funziona dopo che tutto il resto è stato fatto... se al posto della variabile conta usavo j non funzionava... anche se conta va di pari passo con j... per il for richiama 10 volte il setTimeout ma è come se lo mettesse in coda e lo eseguirà più tardi... solo che più tardi la mia j avrà fatto tutto e varrà 10... quindi non ci sarà più un incremento perchè j varrà per 10 per 10 volte... è un mondo a parte perchè funziona solo se l'incremento della variabile avviene all'interno del setTimeout...
confermate le mie supposizioni?

var conta=0;
for(j=0;j<10;j++){
	setTimeout(function(){
		$("#robottino).css("background-position","-"+70*conta+"px "0px");
		conta++;
	},tempo*j);
}