Update animate property before animation start

I'm doing the following animation on an element using jquery animate. The distance value changes before the animation is started so I want to update the animate property value. How can I do this? I used the start callback function as shown but it doesn't update the animation.

el.delay(delay).animate({
     top: -distance
},{
     duration:700,
     start:function(e){
         e.props.top = -($(e.elem).offset().top  - $(".navigation").offset().top);
}
})

Answers 1

  • I was able to find an answer on how to update an animation roperty on the fly. start is a callback where it gets fired when the animation start but the modifications done to the props object doesn't get reflected in the animation! For this, step callback is ideal and it let's us change the fx object on each animation step. Following is the solution I figured out.

    el.delay(delay).animate({
         top: -distance + 'px'
    },{
         duration:700,
         step:function(now,fx){
             if(now == 0){
                 fx.end = -($(fx.elem).offset().top  - $(".navigation").offset().top);
             }
      }
    })
    

    I change the prop value when the first step is fired and after that I ignore the rest of the steps. Thank you every one who helped me! :)


Related Articles