如何使用 jQuery 在屏幕上和屏幕外为 div 设置边距动画？答案

【问题标题】：How to animate a div on- and off-screen with a margin using jQuery?如何使用 jQuery 在屏幕上和屏幕外为 div 设置边距动画？
【发布时间】：2011-05-06 01:28:04
【问题描述】：

我希望 div 在内容加载后从屏幕底部下方向上滑动，然后当用户单击菜单按钮时，我希望 div 向上滑出屏幕。

但是

当它向上滑动时，我希望它不是从屏幕底部出现，而是从屏幕底部上方 100 像素处出现——当它向上滑动到屏幕外时，我希望它开始消失屏幕上边缘下方 100 像素。

我正在使用此代码：

<script type="text/javascript">  
$(window).load(function(){


  $('#content').animate({top: "150px"}, 2000); <!-- to make the #content div slide in -->
  $('body').css('overflow', 'hidden'); <!-- to remove the sidebar -->


$('#navButton').click(function() {
$('#content').animate({top: "-500px"}, 750); <!-- to make the #content div slide out on click -->

});

我可以添加/更改什么来达到我想要的效果？

不胜感激。

【问题讨论】：

标签： jquery animation

【解决方案1】：

不要使用“Body”作为溢出隐藏容器，而是将您的菜单放在一个新的 div 中，该 div 具有溢出隐藏属性和您希望内容消失的边距。

这是请求的示例代码；

<body>
<div id="container" style="overflow:hidden;height:90%;border: #000000 1px solid; margin:20px 0px;">
<input type='button' id='navButton' name="navButton" value="test" />
 <div id="content" style="position:relative;">
   1<br>
   2<br>
   4<br>
   5<br>
 </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
 $('#content').animate({top: "150px"}, 2000);

 $('#navButton').click(function() {
  $('#content').animate({top: "-500px"}, 750);
 });
});
</script>

【讨论】：

你能举个例子吗？ - 迪米特里沃龙佐夫
谢谢，这正是我想要的。
罗伯特，您的代码在我添加 jScrollPane 插件之前运行良好，但会干扰插件。我确信必须有一个非常简单的解决方案，但我只是看不到它。请给点建议？

【解决方案2】：

与 Robert 的建议类似，只要您在 div 启动时不需要屏幕上的内容难以处理，这样的方法就可以工作：

http://jsfiddle.net/EUL7v/

你基本上在你的 div 所在的页面上有一个绝对定位的 div。此 div 距屏幕顶部和底部 x 像素，因此您的 div 在那一点消失。它需要一些调整，但这是基本思想。

编辑：如果其余内容需要难以处理（不被 div 覆盖），则另一个想法。

http://jsfiddle.net/EUL7v/1/

在外部 div 上加一个边框，看看它是如何工作的。

【讨论】：