前后滚动jQuery动画 [英] Scrolling a jQuery animation backwards and forwards

问题描述

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

I am making a futsal (indoor soccer) coaching application which allows a coach to add players on the screen, set their movement direction (by drawing arrows using HTML5 canvas), and then press 'play' to move all players on the screen. A player is made up of a div with a background image of a player.

正在通过使用jquery .animate()函数进行动画处理.

Animation is being done by using jquery .animate() function.

我要做的就是更改播放器div's left和top css的位置属性.

All I do is change the player div's left and top css position attributes.

我想做两件事，不确定该怎么做:

I would like to do two things and unsure on how that can be done:

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

1. I want to create a jQuery slider and move it incremently as the animation takes place. I am guessing I would do this by calculating the total length of an animation before starting it?

我想前后移动jQuery滑块-反转动画并在需要时将其暂停.鉴于我们正在移动div进行动画处理，而不是逐帧进行序列动画，这完全有可能.

I would like to move the jQuery slider above backwards and forth - to reverse the animataion and pause it when required. is that possible at all given that we are moving divs for animation, and not doing a frame-by-frame sequence animation.

推荐答案

在动画开始之前，如何保存开始位置?

Before the animation starts, how about saving the starting position?

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

以后您可以使用

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

等

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

You can allways provide a callback to animations using the step option, this way you can update your slider accordingly.

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

这篇关于前后滚动jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！