How to animate a div on- and off-screen with a margin using jQuery?
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.
加载中,请稍侯......
精彩评论