jquery之向后和向前滚动 jQuery 动画

我正在制作一个五人制足球(室内足球)教练应用程序，该应用程序允许教练在屏幕上添加球员，设置他们的移动方向(通过使用 HTML5 Canvas 绘制箭头)，然后按“播放”以移动屏幕上的所有球员屏幕。播放器由带有播放器背景图像的 div 组成。

动画是通过使用jquery .animate()函数来完成的。

我所做的就是更改播放器 div left 和 top css 位置属性。

我想做两件事，但不确定如何完成:

1. 我想创建一个 jQuery slider 并在动画发生时逐渐移动它。我猜我会在开始动画之前计算动画的总长度来做到这一点？

2. 我想前后移动 jQuery slider - 以反转动画并在需要时暂停它。考虑到我们正在移动 div 来实现动画，而不是执行逐帧序列动画，这是否可能。

请您参考如下方法:

在动画开始之前，保存起始位置怎么样？

startpostion = $(playerdiv).position(); //Or offset, I keep forgetting which 
$(playerdiv).data("startTop",startposition.top); 
$(playerdiv).data("startLeft",startposition.left); 

稍后您可以使用它来检索它

left = $(playerdiv).data("startTop") 

等等

您始终可以使用步骤选项提供动画回调，这样您就可以相应地更新 slider 。

$(playerdiv).animate({  
    top : targetTop, 
    left : targetLeft,  
    step, function(){ magic happens here 
})