CODEWITHSUNDEEP
javascriptjqueryanimationpositionjquery-animate
Aaron
Aaron

Reputation: 2500

jQuery Animate Modification

H, I'm trying to modify a jQuery animation using the step function, but it doesn't seem to be taking effect.

$(el).animate({top:Y, left:X},
{duration:500,queue:false,specialEasing:{top:'linear',left:'linear'},
step:function(now,fx){
    var someCalculations=x;
    fx.end=someCalculations;
}});

I'm trying to modify the end point of the animation. The actual problem lies around the fact that I'm animating an element left/right and up/down. When animating up/down it scales to mimic distance. However, when scaling - this throws off the computed average animation speed and the result is happening too fast. So, I'm trying to compensate for this by offsetting the end position inside the animation.

Whatever I do, it doesn't seem like it wants to take effect. Logging the fx.end value will show a different value (tried fx.end=0 and it logs 0), but it doesn't animate to 0....

any ideas?

Thanks

Upvotes: 2

Views: 138

Answers (2)

Yooz
Yooz

Reputation: 2518

How about not changing the properties left and top in animate but in the step function, and you use a "useless" css property (text-indent) as a counter :

$("#test").css( "text-indent", 100 );


$("#test").animate({textIndent: 0},
{duration:5000,queue:false,specialEasing:{top:'linear',left:'linear'},
step:function(currentStep){
    console.log(currentStep);
    $("#test").css({left:5*currentStep,top:3*currentStep});
}});

See JsFiddle or Proper example

Upvotes: 1

christian314159
christian314159

Reputation: 639

I don't think you can do it like that. fx.end = something; won't actually change the animation you've started. fx.end is just a reference you get for every step, telling you that this animation will go on to x before it ends.

You might want to try something like this:

$(el).animate({ top : Y, left : X }, {
  step : function( now, fx ){
    var whereElementShouldActuallyBeRightNow = calculations();

    $(el).css({
      top : whereElementShouldActuallyBeRightNow.top,
      left : whereElementShouldActuallyBeRightNow.left
    });
  }
});

So on every animation step you correct the position of your element to where you actually want it to be.

Or you just stop the animation all together when it has gone far enough:

$(el).animate({ top : Y, left : X }, {
  step : function( now, fx ){
    if( now >= threshold ){
      $(this).stop();
    }
  }
});

Upvotes: 1

Related Questions