Question

Is there a way to add a listener that triggers a function when an element is at a certain y-position?

On click, I have an element animating up with jQuery.

During that animation, the elements y-position will reach 0 (and go past it). When it reaches 0, I’d like to trigger another function that displays a different .

I’ve been trying to read about event management with anonymous event handling but have been unable to figure out how to get it working. Thank you!

Answer 1

You can use step option of animate method which is fired at each step of the animation. Here you can check for the y-position of the element and trigger the required event.

$(element).animate({
  height: '50%'
},
{
  step: function(now, fx) {
     //Here check the y-position of the element and then call the required function
     if($(fx.elem).offset().top == 0){
        //Code here
     }
  }
});