向后和向前滚动jQuery动画

Question

我正在制作一个五人制足球(室内足球)教练应用程序,它允许教练在屏幕上添加玩家,设置他们的移动方向(通过使用HTML5画布绘制箭头),然后按"播放"移动屏幕上的所有玩家.玩家由具有玩家背景图像的div组成.

动画正在使用jquery .animate()功能完成.

我所做的只是更改播放器div's left和topCSS位置属性.

我想做两件事,不确定如何做到这一点:

1. 我想创建一个jQuery滑块,并在动画发生时以递增方式移动它.我猜我会通过在开始之前计算动画的总长度来做到这一点吗？

2. 我想将jQuery滑块向前和向后移动 - 以反转动画并在需要时暂停它.这是可能的,因为我们正在为动画移动div,而不是进行逐帧序列动画.

Answer 1

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

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

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

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

ETC。

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

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