StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPass Variable to .animate Step Function
text
Body
copied!<p>Run into a wall while trying to pass a variable into my step function to handle some final cross browser fallback animation. I've built a general purpose animation method here:</p> <pre><code>Animator:function(obj,aniArgs,duration,aniEasArgs,delay,stepFunction,completeFunction){ obj.stop(true,true).animate(aniArgs, {duration:parseInt(duration,10),queue:false,specialEasing:aniEasArgs, step:function(now,fx){ if($.isFunction(stepFunction)){ stepFunction.apply(this,arguments); }; },complete:function(){ if($.isFunction(completeFunction)){ completeFunction.apply(this,arguments); };}}); }; } </code></pre> <p>This works and animates everything needed. However I'm attempting to call the Animator function and use the step function to animate a property. Here's the call:</p> <pre><code>var angle=0, stepFunction=function(now,fx,angle){ angle+=1; $(this).css({"-ms-transform":"rotate("+angle+"deg)"}); }; Animator(obj,aniArgs,speed,easing,0,stepFunction,null); </code></pre> <p>All of the other arguments being passed in are fine and check out well. The obj is the obj being animated, aniArgs is an object literal containing all CSS names/values to animate, speed is speed, easing is an object literal containing all CSS names/easing values, the stepFunction is the function variable declared above, and null is indicating there isn't a complete function to execute.</p> <p>Everything is working great, but I'm running into a variable issue with the step function. I can't seem to get the value of angle inside of the actual step function. Inside the step, I can log now and fx, and those are working well, however I'm unable to pass in the angle with the initial 0 value so that I can increment it.</p> <p>Any ideas where I'm going wrong? Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload