How to animate a div on- and off-screen with a margin using jQuery?_问答_开发者

How to animate a div on- and off-screen with a margin using jQuery?

开发者 https://www.devze.com 2023-03-02 22:05 出处：网络

I want a div slide up from below the bottom of the screen after the content has loaded, and then when a user clicks the menu but开发者_如何学运维ton I want the div to slide up off-screen.

BUT

as it slides up, I want it to appear not from the very bottom of the screen, but from, say, 100px over the bottom of the screen – and when it slides up offscreen, I want it to begin disappearing about a 100px below the upper edge of the screen.

I'm using this code:

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

});

What can I add / change to achieve the effect I want?

Would be grateful for a bit of advice.

Instead of using 'Body' as the overflow hidden container, put your menu inside a new div that has the overflow hidden attribute and a the margins you want the content to disappear at.

Here is the requested example code;

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

Similar to Robert's suggestion, something like this can work as long as you don't need the content on the screen intractable while the div is up:

http://jsfiddle.net/EUL7v/

You basically have an absolutely positioned div on the page which your div is within. This div is x pixels from the top and bottom of the screen, so your div disappears at that point. It requires some tweaking but is the basic idea.

EDIT: Another idea if the rest of the content needs to be intractable (not covered up by a div).

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

Put a border on the outer div to see exactly how this works.