I'm trying to get the current position (between 0 and 360°) of .me开发者_C百科
during this animation :
http://jsfiddle.net/WcyyF/117/
So the hover out event doesn't start the animation from 0
but continues it from x
.
Math will be involved.
You set their attr('data') with their start angle, so when you hover and stop, you will have to set all their angle again.
Here's the pseudo code:
length_x = $(this).position().left - center.left;
angle = arcos(length_x/radius);
$(this).attr('data') = angle;
Another option with slightly less complex math is to track when the animation starts, and when it is interrupted. Since it runs at a constant speed you can use the elapsed time to work out how many degrees each element should have traveled, and update the starting positions accordingly. Roughly along the lines of:
var elapsedTime = new Date().getTime() - this.startedAt;
var elapsedDegrees = Math.floor(360 * (elapsedTime / 20000));
$(".me").each(function() {
$(this).attr('data', parseInt($(this).attr('data')) - elapsedDegrees + 360)
});
Here is an example: http://jsfiddle.net/WcyyF/120/
精彩评论