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的位置设置为相对或绝对。如果你想创建一个游戏，这将对hitboxs有用。

Demo here

jQuery Animate动态转换

3 个答案: