让div从页面脱落

Question

所以我一直在玩jQuery一段美好的时光，我试图让效果正常工作。我在页面中间有一个主要的正方形div，当有人点击一个链接时，我想让这个盒子看起来像是从页面上掉下来并消失，显示出一个新的页面。我一直在玩easing插件，但我似乎可以得到我想要的工作。基本上我有div的顶部边距或只是顶部距离增加到一个很大的数字。然而，这只会让div下降，但它也扩大了我的页面，并且它在页面上更低。我基本上想要div掉到网站上，而不是改变网站的尺寸。任何人都知道如何做到这一点？

谢谢！ Danny

Answer 1

为了防止您的页面在点击链接时重新规划，请在您的div容器的css属性中添加overflow：hidden。 另外，请确保在动画结束时隐藏div。

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