jQuery动画动态变换

Question

我是jQuery的新手，我正在构建一个基本的块，如果我按左，它将向左移动；如果我按右，则向右移动。它工作得很完美。然而，我不想直接使用css webkitTransform，我想使用动画来使运动更加流畅。这是我的初始代码：http://jsfiddle.net/hphchan/c2zzhjwL/。

我已经浏览了一整天如何做到这一点，但仍然无法得到答案。我注意到有一个.animate()内置的jQuery和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);
       }
});

演示

如果您需要更详细的信息，请使用文章

Answer 2

您有非常少的时间来动画旋转器，我建议使用CSS来实现同样的结果，这里是示例。

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

Answer 3

使用动画，您可以使用：

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

为此，必须将#spinner的位置设置为相对或绝对。如果您想要创建一个游戏，这将是有用的击中盒。

这里的演示