jQuery Анимация Динамическое преобразование

Question

Я новичок в jQuery и создаю базовый блок, который перемещается влево, если я нажму налево; двигайтесь вправо, если я нажимаю вправо. Он работает отлично. Однако, вместо использования css webkitTransform напрямую, я хотел бы использовать анимацию, чтобы сделать движение более плавным. Вот мой первоначальный код: http://jsfiddle.net/hphchan/c2zzhjwL/.

Я просматривал, как это сделать весь день, но до сих пор не может прийти к ответу. Я замечаю, что есть встроенный метод jQuery .animate() и функция step. Однако я не знаю, как это сделать, чтобы это сработало.

Спасибо.

Answer 1

Использование .animate вы можете заменить

$spinner.css("webkitTransform", "translate(" + i + "px, 0)");

с

$spinner.animate({ left: i }, { 
     duration: 500, //change this according to your need 
     step: function(now, fx){ 
      $spinner.css("margin-left", now); 
     } 
}); 

DEMO

Article, если вы хотите более подробно

Answer 2

У вас есть очень меньше времени, чтобы оживить вертушку, я предложил бы использовать CSS для того чтобы достигнуть того же результата здесь является example.

#spinner { 
    width : 50px; 
    height : 10px; 
    background-color : #000; 
    -webkit-transition: all .6s; /* Safari */ 
    transition: all .6s; 
} 

Answer 3

С одушевленных вы можете использовать:

$spinner.animate({ 
    left: i 
}, 200); 

Для этого необходимо установить позицию вашего #spinner к абсолютным или относительным. Если вы хотите создать игру, это будет полезно для hitbox.

Demo here