Geek Answers Handbook

Scrolling jQuery animation back and forth

I am making a futsal (indoor soccer) coaching application that allows the coach to add players to the screen, set the direction of movement (by drawing arrows using the HTML5 canvas), and then click “play” to move all the players to the screen. The player consists of a div with the background image of the player.

Animation is performed using a function jquery .animate().

All I do is change the position attributes div's leftand topcss.

I would like to do two things and am not sure how this can be done:

  • I want to create a jQuery slider and move it as the animation grows. I assume I will do this by calculating the total length of the animation before running it?

  • I would like to move the jQuery slider up and down - to rotate the animation and pause it when necessary. that this is possible at all, provided that we move the divs to animate and do not animate sequences sequentially.

+5
source share
2 answers

Before starting the animation, how about keeping the starting position?

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

Later you can get it with

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

and etc.

You can always perform an animation callback using the step parameter, so you can update your slider accordingly.

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

I would do it like this:

  • "", divs . divs :

    • startDivTop = initialDivTop + (finalDivTop - initialDivTop) * sliderPosition;
    • startDivLeft = initialDivLeft + (finalDivLeft - initialDivLeft) * sliderPosition;
    • startTime = totalDuration * sliderPosition;

    ( - , sliderPosition - - 0 1)

  • , .stop() div: , : , divs .

  • "" , "" , , .

, :)

0

More articles:


All Articles