javascript - 让一个 div 从页面上掉下来

Question

所以我一直在玩 jQuery，我正在尝试让效果正常工作。我在页面中间有一个主要的方形 div，当有人单击链接时，我希望该框看起来像从页面上掉下来并消失，在它后面显示一个新页面。我一直在玩 easing 插件，但我似乎可以得到我想要的工作。基本上，我将 div 的上边距或仅顶部距离增加到很大。但是，这只会使 div 下降，但它也会扩展我的页面，并且它在页面上的位置要低得多。我基本上希望 div 脱离站点，而不是更改站点的尺寸。有谁知道该怎么做？

谢谢！丹尼

Answer 1

为防止您的页面在单击链接时重新调整大小，请将 overflow:hidden 添加到您的 div 容器的 css 属性中。另外，请确保在动画结束时隐藏 div。

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