in gamequery; how would I move an object “slowly” from its “dropped” location to where it needs to go?

Question

I am not trying to get it to follow a set path since the path is variable. but I am trying to set the object to fall in a noticable pattern from where Idrop it.

$(".gQ_sprite").mouseup(function() {        

        //test condition to see if collides with a box etc...
        collision1 = $("#" + currentClickedDivId).collision(".gQ_group, .box");
        if(collision1.length > 0)
        {
                       //irrelevent
        }
        else
        {
            //figure out yarnball Id...
            i = wordLength - 1
            yarnBallIdNumber = currentClickedDivId.charAt(10);
            yarnBallPositionFromStart = i - yarnBallIdNumber
            initialMovedYarnBallXPosition = yarnBallPositionFromStart * yarnSpacing

            initialMovedYarnBallXPosition = initialXYarnPosition - initialMovedYarnBallXPosition


            $("#" + currentClickedDivId).xy(initialMovedYarnBallXPosition ,yarnYPosition);
        }

right now my code simply flashes the object back to its location after the user releases it, and I am trying to move it back "slowly" if you will and can't think of the best way to do it.

so far my thoughts are to use a loop and subtract (or add) the location of the object with delay, but there may be a better way to move the object that I don't know about.

any ideas?

Answer 1

What you could do is to use jQuery to animate something else than a CSS property, like explained there: https://coderwall.com/p/fn2ysa

In your case to make your sprite move from currentX to destinationX in one second you code would look like:

var from    = {x: currentX};
var to      = {x: destinationX};
$(from).animate(to,{duration: 1000, step: function(step){
    $(mySprite).x(step);
}});