nel documento html c'è un div all'interno del quale c'è un'immagine
codice:
<div id="containeromino" style="position:absolute; left:1150px; top:500px;">
[img]frame-1.png[/img]
</div>
l'immagine all'interno del div è un omino animato, che cammina: per animarlo ovviamente ho dovuto creare dei frame dell'immagine (sono 26) e animarli con un setInterval. l'omino vvoiamente non è "sun un tapis roulant", quindi devo farlo anche muovere lungo un percorso. a questo ci pensa il div che contiene l'immagine: con un setInterval faccio in modo che la proprietà left del div scali mano a mano di un px. così il div si muove, l'immagine si anima e l'omino sembra che cammini.
questo è l codice: ho creato una funzione per fissare l'inizio del setInterval: tuttavia l'immagine non può muoversi all'infinito, ragion per cui ho dovuto anche inseire un clearInterval
codice:
//individua l'immagine-omino
var containeromino = $("#containeromino");
var omino = $("#omino");
// setta un timeout che chiama l'inizio dell'intervallo dopo uno specifico tempo: l'intervallo prende luogo
// e viene cancellato quando si raggiunge il tempo fissato in end (viene chiamato un nuovo timeout che contiene il clearinterval
function movement(f, start, int, end){
//con un valore a start maggiore di zero il setInterval può cominciare con un piccolo ritardo, volendo.
setTimeout(iteration, start);
function iteration() {
interval = setInterval(f, int);
//se passo anche l'argomento end facio in mod che l'animazione termini
if(end) setTimeout( function(){clearInterval(interval)}, end);
}
}
var mx = 1150;
function move(){
containeromino.css("left", mx+"px");
mx--
}
movement(move, 10, 20, 6000);
var x = 1;
function changeframe(){
omino.attr("src", "tavole-"+x+".png");
x++;
if (x>25) x=1;
}
movement2(changeframe, 0, 40, 6000);
i movimenti cominciano e si attivano tutti nel modo giusto,l'animazione prende il via come dovrebbe, si sviluppa come dovrebbe ma non si ferma come dovrebbe: purtroppo capita che un movimento si fermi (quello del div), mentre l'altro, quello dell'omino che cammina, non si fermi al tempo stabilito.
facendo varie prove ho potuto notare che "spezzando il codice", vale a dire eliminando uno dei due movimenti, l'altro, quello che rimane, sicuramente termina al tempo stabilito.
come mai accade ciò? vorrei che entrambe le animazioni si fermassero al tempo stabilito