Question

The above picture states my scenario. When user clicks a button, i’m moving a div from Location ‘A’ [100,100] to Location ‘C’ [100,500] using Jquery Animate() function, During that relocation, the div should have to cross Location ‘B’ [100,250]. At that time, when it crosses the Location B i need to fire another animation.

Related to this problem i had surfed a lot and found this link.But it dont have an accepted answer. Additionally, Jquery has an event called Change , But unfortunately it is compatible only with form elements. My question is, can we handle events like postionChanged or offsetChanged in jquery manually if that really doesn’t exist.? or is there any feasible method available to achieve my need.?

Thanks..!

Answer 1

jQuery.animate takes an options argument that supports the following method (source)[http://api.jquery.com/animate/]

step Type: Function( Number now, PlainObject fx ) A function to be
called after each step of the animation.

In your case the code would look something like:

$('div').animate({
  left: 500
}, {
  step: function(now, fx){
    if (parseInt(now, 10) === 250){
      // call your animation method here.
    }
  }
})