[Jquery] démarrer animation en même temps que la function

Bonjour à tous,

Je suis en train de tenter de modifier le background en meme temps que mon animation mais la seul facon que j'ai trouvé c'est ainsi.

case 40: // flèche BAS

$("#perso").animate({
top: '+=32'								
}, 200, function() {

setTimeout(function(){
$("#perso").css("background-image","url(img/goku-1.png)");
},10)
setTimeout(function(){
$("#perso").css("background-image","url(img/goku-2.png)");
},100)
setTimeout(function(){
$("#perso").css("background-image","url(img/goku.png)");
},200)

// Animation complete.
});

break;

Mon soucis c'est que l'animation s'effectue qu'une fois le déplacement de la div effectuer alors que je souhaiterais le faire en même temps.

Savez vous comment je pourrais procéder ?
Modifié par Dbzes59113 (28 Apr 2013 - 20:58)

Salut,

C'est normal que l'animation de ton perso s'effectue une fois le déplacement de 32px fait puisque tu lances tes setTimeout dans le callback de l'animate.

Donc tu n'as qu'à les sortir du callback :

case 40: // flèche BAS

// Animation de la box du perso
$("#perso").animate({
top: '+=32'								
}, 200);

// Animation des sprites
setTimeout(function(){
$("#perso").css("background-image","url(img/goku-1.png)");
},10)
setTimeout(function(){
$("#perso").css("background-image","url(img/goku-2.png)");
},100)
setTimeout(function(){
$("#perso").css("background-image","url(img/goku.png)");
},200)

break;

Sinon je te conseille plutôt de donner des classes css au lieu de gérer les urls directement dans le js, du genre :

case 40: // flèche BAS

// Animation de la box du perso
$("#perso").animate({
top: '+=32'								
}, 200);

// Animation des sprites
setTimeout(function(){
$("#perso").removeClass().addClass("movement1");
},10)
setTimeout(function(){
$("#perso").removeClass().addClass("movement2");
},100)
setTimeout(function(){
$("#perso").removeClass().addClass("movement3");
},200)

break;

Et dans le css :

#perso .movement1 {
background-image : url("img/goku-1.png");
}

#perso .movement2 {
background-image : url("img/goku-2.png");
}

#perso .movement3 {
background-image : url("img/goku-3.png");
}

Et enfin pour être vraiment propre, je te conseillerais d'utiliser des sprites plutôt que des images séparées : http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Du coup, ton css ressemblerait plutôt à ça (les valeurs sont données à titre d'exemple bien sûr) :

#perso {
background : url("img/goku.png") no-repeat -9999px -9999px;
}
#perso .movement1 {
background-position : 0 0;
}

#perso .movement2 {
background-position : 0 250px;
}

#perso .movement3 {
background-position : 0 400px;
}