Question

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

BUT

当它向上滑动时，我希望它不是从屏幕的最底部出现，而是从屏幕底部的100px出现 - 当它在屏幕上滑动时，我希望它开始消失在屏幕上比屏幕上边缘低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 -->

});

我可以添加/更改哪些内容以达到我想要的效果？

会对一些建议表示感谢。

Answer 1

不要使用“Body”作为溢出隐藏容器，而是将菜单放在具有溢出隐藏属性的新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>

Answer 2

类似于罗伯特的建议，只要你不需要屏幕上的内容在div上升时，这样的事情就可以起作用：

http://jsfiddle.net/EUL7v/

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

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

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

在外部div上放置一个边框，以确切了解其工作原理。

如何使用jQuery在屏幕上和屏幕外设置动画效果？

2 个答案: