Hola amigos tengo una duda
estoy haciendo una animacion css con sprites, les pongo el codigo
Cita: #Juno{
background: url(sprite/KCamina.png) no-repeat left top;
height: 35px;
width: 32px;
position: relative;
}
.caminaDerecha{
animation: KcaminaD 0.9s steps(4) infinite;
}
.caminaIzquierda{
animation: KcaminaI 0.9s steps(4) infinite;
}
//////////////////////////////////////////KEY FRAMES//////////////////////////////////////////////
@keyframes KcaminaD {
0% { background-position: 0px 0px; }
100% { background-position: -128px 0px; }
}
@keyframes KcaminaI {
0% { background-position: -32px -35px; }
100% { background-position: -160px -35px; }
}
ahora bien, tengo 1 div en mi codigo html con un ID (llamado Juno), este div no tiene ninguna clase adjunta (eh aqui mi problema)
estoy intentando hacer que cuando presionen 1 tecla se agregue una clase (En este caso seria caminaDerecha o caminaIzquierda), siempre y cuando el div no tenga otra clase ya asignada, si ya tiene una clase, quite la clase y ponga la nueva.
esto es lo que llevo en mi codigo JQuery
Código PHP:
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 37:
$('#Juno').addClass("caminaIzquierda");
$('#Juno').animate({left: "-=15px"}, 'fast');
break;
case 38:
$('img').animate({top: "-=15px"}, 'fast');
break;
case 39:
$('#Juno').addClass("caminaDerecha");
$('#Juno').animate({left: "+=10px"}, 'fast');
break;
case 40:
$('img').animate({top: "+=15px"}, 'fast');
break;
default:
break;
}
});
});
Aqui les dejo lo que estoy haciendo (solo funcionan las teclas flecha derecha y flecha Izquierda)
http://juangemelonet.zz.mu/experimentoKirby/kirby.html
como se daran cuenta, conforme valla avanzando seran mas clases las que estare agregando ¿existe alguna funcion o metodo en Jquery que lo haga en automatico?
la verdad soy muy novato con Jquery
de antemano muchas gracias y espero su respuesta :)