Question

En mi juego de carros hecho en html tengo el siguiente código para hacer que avance 10px un auto (que se mueva hacia la derecha):

$('#derecha').click(function() {
    var auto = $('#auto');
    auto.css('left',parseInt(auto.css('left'))+50);
});

El problema es que el coche brinca de una posición a otra y me gustaría hacer una animación entre la posición origen y destino.

¿Cómo lo puedo hacer?

Answer 1

podrías hacerlo desde CSS3 de la siguiente forma

#auto {
    -webkit-transition: left 1s;
}

y con jQuery sería de la siguiente forma

$('#derecha').click(function() {
    var auto = $('#auto');
    auto.animate({
        'left': auto.css('left') + 50 + 'px'
    }, 1000);
});

Answer 2

Prueba con esto:

$('#derecha').click(function() {
$('#auto').animate({"left": "+=50px"};

});

Answer 3

Tienes dos posibilidades, o lo haces por css especificando que el elemento será animado. O lo puedes animar directamente por javascript

en el caso de hacerlo por css puedes hacer

#auto{
     transition: left 2s;
     -webkit-transition: left 2s; 
}

de esta forma especificas que al elemento con id "auto" se le va a animar la propiedad left con una duracion de 2 segundos, por lo tanto cada vez que se le cambie le valor a la propiedad "left" va a pasar de un valor a otro progresivamente demorando 2 segundos

osea que especificando esa animacion mas tu codigo Jquery funcionaría

la otra forma es directamente por Jquery con el metodo Animate

$('#derecha').click(function() {
    var auto = $('#auto');
    auto.animate({
           left : parseInt(auto.css('left'))+50)
    },2000);
});

en ese caso la duracion seria de 2000 ms = 2 segundos

cualquier duda en este link