entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

0voto

Usar animación para desplazar elementos en pantalla con jQuery

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?

3 Respuestas

2votos

daniel_garcia Puntos1440

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);
});

1voto

diego_romero comentado

si usas animate no es necesario utilizar -webkit-transition y vicebersa...
ademas de que con -webkit-transition solo funcionaría en los navegadores que utilicen webkit

1voto

Peter Puntos150460

Prueba con esto:

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

});

1voto

diego_romero Puntos370

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

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta