Is there a way to use jquery.animate to load a page with ajax and when its ready animate it to slide up or to the side? So lets say im in the index.html page and I want to go to the about.html page, it will first load it and when it is ready instead of refreshing to the new page, it will animate it using this method: http://demos.flesler.com/jquery/localScroll/#section4c
function(){
$("#go2About").click(function(){
$('about.html').animate({
//animate the new page here
});
});
this will be some kind of an example code of how it will animate
You could have the same effect only not actually refresh the page.
If you wrap each of your "page's" HTML in a wrapper <div> element, for example, then you can simply animate those wrapper div's in and out of the users view port to create the effect of page transitions.
Your AJAX calls can populate the corresponding <div> element with the pages HTML and once loaded you can call the .animate() function to swap pages.
You could use something like this logic:
<!DOCTYPE>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function loadIt() {
$.ajax({
url: "about.html",
cache: false,
success: function (data) {
$("#content").empty();
$(data).hide().appendTo($("#content")).slideDown();
},
error: function () {
alert("something went wrong");
}
});
}
</script>
</head>
<body>
<input type="button" id="button1" value="Load About" onclick="loadIt();" />
<br />
<div id="content" style="width: 400px; height: 400px; border: 1px solid #000;">
</div>
</body>
</html>
But just know that the content of "about.html" shouldn't be a full HTML document - it should be something that goes into a <body> element.
An easier method might be to use an iframe (hidden when it doesn't have any content) - when you click the button, have javascript set the iframe's src attribute to "about.html", then use slideDown() to animate it being "loaded". This way, "about.html" can be a full HTML document and you don't have to worry about something like that.