我正在使用jQuery的简单动画方法和使用jQuery动画方法的旋转函数来创建移动div ("#box")。
function AnimateRotate(d, div, del){
var elem = $(div);
$({deg: 0}).delay(del).animate({deg: d}, {
duration: 2000,
step: function(now){
elem.css({
transform: "rotate(" + now + "deg)"
});
}
});
}
...
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "400px",
left : "400px",
width : "250px",
height : "120px"
},2000, function() {.....
这完美无缺，但这只会将div从原始位置移动到新设置的位置。
我希望它可以进行螺旋运动，所以我需要div将一个位置移动到另一个位置，移动到另一个位置，移动到另一个位置....
要做到这一点，我试过：
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "400px",
left : "400px",
width : "250px",
height : "120px"
},2000, function() {
AnimateRotate(360, "#box", 0)
$("#box").animate(
{
top : "200px",
left : "200px",
width : "250px",
height : "100px"
},2000, function() {.....
依此类推，直到我有大约6个不同的位置。但是在每个动画之间都有一点暂停，这基本上破坏了整个动画。
我想知道的是，是否有办法阻止这种暂停？
如果没有，有没有更好的方法来做这种类型的动画？ 即使这意味着完全丢失div并使用其他类型的形状动画。
请让我知道最好的办法是什么。
非常感谢您的回答。