Question

I am using jQuery animate to change the position of multiple elements on the page (decorative elements). I want the element to be deleted if it exits body area. (if left is larger than body width or top is larger than body height).

The following can not be used in my case:

• overflow hidden for the body
• manually animating the element. I want to use jQuery animate to keep it simple (I dinamically create elements, animate them then I don’t care about them, don’t keep track of them, they have a .remove() methode when the animation is complete)

http://jsfiddle.net/a7Nck/

So in this JSfiddle I want the red div to dissappear when it reaches right edge of the body so that no scrollbars will appear.

Isn’t there any CSS3 media query for example so that if a div is not in the viewport it will be hidden?

EDIT:

I just thought of a solution: get the width of the body prior to triggering the animation and then animate the top and left by using the minimum between the body size and what the animation should do. The problem is that this will affect animation speed.

Answer 1

You can use animate’s step function.

The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

var w = $(window).width()
$('div').animate({
    left: '20px'
}, 500).delay(1000).animate({
    left: '2000px'
}, {
    step: function(now, fx) {
        if (now > w) {
            $(fx.elem).remove()
        }
    }
}, 1000);

Fiddle