如何使用jQuery在边框和屏幕外使用边距动画div？

我想要一个div在内容加载后从屏幕下方向上滑动，然后当用户单击菜单按钮时，我希望div在屏幕外滑动。如何使用jQuery在边框和屏幕外使用边距动画div？

但

，因为它滑，我希望它从屏幕的最底部没有出现，而是从，说，100像素在屏幕的底部 - 当它离屏幕上滑，我想它开始消失在屏幕上边缘下方约100px处。

我使用这个代码：

<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 --> 

});

我可以添加/修改以达到我想要的效果？

请多多指教。

来源

2011-05-05 Dimitri Vorontzov

而不是使用'身体'作为溢出隐藏容器，把你的菜单在一个新的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>

来源

2011-05-05 16:53:38 Rob

你能举个例子吗？ - Dimitri Vorontzov – 2011-05-05 16:55:31

谢谢，这正是我想要的。 – 2011-05-05 17:52:23

Robert，在添加jScrollPane插件之前，您的代码工作良好，但会干扰插件。我确信必须有一个非常简单的解决方案，但我只是看不到它。请给点意见？ – 2011-05-05 22:23:11