Make a div fall off the page

Question

Hey,

So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?

Thanks! Danny

Answer 1

To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties. also, make sure you hide the div when the animation ends.

$('a').click(function(){
   $('#thediv').parent().css('overflow','hidden');
   $('#thediv').animate({'top': '+=500px', opacity: 0},function(){
     $(this).hide();
   });
});