ajax - jquery slide off page -
i trying create few animations on page load , on button click.
on page load, div should slide in bottom of page. when user clicks button, div slides off top of page goes url after slide off completes.
the on load function (slide in bottom) doesnt trigger @ all, , dont know how tell go url after animation completes. here 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 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 top of page $("#moveup").click(function(){ $("#panel").animate({ margintop: "-=250px", height: "+=50px" }, 1000); // after animation completes go url??? $(this)........; }); </script> </body>
concerning on load issue:
remember, $(function()); syntax shorthand for:
$(document).load(function() {})
in other words, time code run #panel have loaded. why event handler never being called! aren't adding listener until after event has been triggered
try instead:
$(function() { $("#panel").animate({ marginbottom: "-=1250px", height: "+=50px" }, 1000); }); }); as url after animate issue, can add callback animation passing in third parameter. parameter lets define function gets called after animation completes.
try this:
$("#moveup").click(function(){ $("#panel").animate({ margintop: "-=250px", height: "+=50px" }, 1000, function() { window.location="http://google.com"; }); });
Comments
Post a Comment