CODEWITHSUNDEEP
javascriptjqueryjquery-animate
adardesign
adardesign

Reputation: 35781

What information can i get from the jQuery's animate step method on each step?


I got a vertical testimonials belt and i have this method that animates its top value with a calculated value (depending on the height of the current testimonial) every few seconds.

Now when a user hovers over it, it stops right away (via .stop() and also the interval is cleared via clearInterval(idOfinterval)
But i still want to know how much more pixels it had left to animate before it suddenly got halted.

So i looked up in the documentation and i see that there is a step method that has a callback and can give me information on each(?) step of the animation.

see part of the code

 //in middle of a object literal
  animate:function(){
    animAmmount = someCalculation;
    testimonialsBelt.parentElment.animate({
    top:"-="+howMuchIsLeft||animAmmount+"px"},
    {step:function(step){
         //here i am trying to get how much px it has moved so far
           currTopVal = step;
           console.log("currTopVal", currTopVal);
        // i get some numbers, and i have no idea from where it got them 
       }
   },
   calculatedSpeed);
}

So my main questions are

  • What information can i get from parameters passed in to the step method?
  • and does it callback on each interval of an animation?

    • Upvotes: 1

    Views: 756

    Answers (1)

    JoshNaro
    JoshNaro

    Reputation: 2097

    It looks like the "this" symbol will be the element animate was called on. The first parameter to the callback looks like the value of the property animated on this step. The second parameter is an object that looks like this:

    • elem: the element animate was called on
    • end: (guess) the value of the property when animation is complete
    • now: (guess) the value of the property in this step
    • options: the original options you passed into animate.
    • pos: (guess) the position of something
    • prop: (guess) the property acted on in this step. If there are multiple property changes, there is probably a step for each one.
    • start: (guess) the value of the property when animation was started
    • startTime: (guess) the time in ms the animation started.
    • state: A float from 0 to 1 that indicates how close to completion the animation is.
    • unit: the unit of the property value (e.g. 'px').

    Upvotes: 2

    Related Questions