jquery slide off page
I am trying to create a few animations on page load and on button click.
On page load, the div should slide in from the bottom of the page. When the user clicks the button, the div slides off the top of the page then goes to the URL after the slide off completes.
The on load function (slide in from bottom) doesnt trigger at all, and I dont know how to tell it to go to the URL after the animation completes. Here is a jsFiddle.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="content-container">
<div id="content" style="position:relative; z-index:2000;" >
<a href="http://google.com" id="moveUp"><button>button</button></a>
</div>
</div>
<div id="panel">
<div class="content">
<img src="http://www.google.com/images/logos/ps_logo2.png" width="122"><br /><br />
</div>
</div>
<script>
// On load panel slides in from bottom of page
$(function() {
$("#panel").one('load', function () {
$("#panel").animate({
marginBottom: "-=1250px", height: "+=50px" }, 1000);
}).each(function() {
if(this.complete) $(this).load();
});
});
// On click slide panel off the top of page
$("#moveUp").click(function(){
$("#panel").animate({
marginTop: "-=250px",
heig开发者_Python百科ht: "+=50px"
}, 1000);
// After animation completes THEN go to URl???
$(this)........;
});
</script>
</body>
It's difficult to try and work out exactly what you are trying to accomplish but this jsFiddle might help
All i've done is absolutely positioned the div and then on load change the top value so that it animates in from the bottom.
Concerning your on load issue:
Remember, the $(function()); syntax is shorthand for:
$(document).load(function() {})
In other words, by the time that code is run #panel will have already loaded. This is why your event handler is never being called! You aren't adding the listener until after the event has already been triggered
Try this instead:
$(function() {
$("#panel").animate({
marginBottom: "-=1250px", height: "+=50px" }, 1000);
});
});
As for the URL after animate issue, you can add a callback to an animation by passing in a third parameter. This parameter lets you define a function which gets called after the animation completes.
Try this:
$("#moveUp").click(function(){
$("#panel").animate({
marginTop: "-=250px",
height: "+=50px"
}, 1000,
function() {
window.location="http://google.com";
});
});
加载中,请稍侯......
精彩评论