Question

I have a function that moves a box from right to left of a page on click. When the div starts to exit the window and thus has a negative position based on my function, I would like to fire an event. I however get no response when the div passes the edge of the left side of the screen. Anyone have any ideas?

I know the position ($('#container').position().left/$(document).width())*100) is defined and if I changed <0 to >0 when the page is initially loaded, the alert will fire.

<script>
$("#play").live('click', function() {
  $("#container").animate({"left": "-=100%"}, 25000);
});
if (($('#container').position().left/$(document).width())*100<0){
    alert('test');
}
</script>  

Answer 1

You could use the step option to animate:

step: A function to be called after each step of the animation.

Something like this:

$("#container").animate({"left": "-=100%"}, {
    duration: 25000,
    step: function() {
        if(($('#container').position().left / $(document).width())*100 < 0) {
            alert('test');
        }
    }
});

That will get you your alert as soon as your position test is true. The animation may keep going after the #container is off the screen of course.