This lightweight and easy to use jQuery Pageswitch Plugin allows you to easily add site-animations to your navigation.
Try this links to test jQuery Pageswitch Plugin:
<div id="example">
<a href="index.html">Example #1</a><br />
<a href="http://www.example.com">Example #2</a><br />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example a:eq(0)').pageswitch(); // select the first a-tag and use standard settings for the animation
$('#example a:eq(1)').pageswitch({ // select the second a-tag
url: 'index.html', // overwrites the a-href
properties: { marginLeft: -$('body').width() }, // manipulates the margin of the target
options: { duration: 1000 } // sets the duration of animation
});
});
</script>
Allowed settings:
url // 'default' for <a>-href, use e.g. 'http://www.example.com' to overwrite href with another url
event // e.g. 'click', 'mouseover', 'mouseenter', 'mouseleave', ..
target // name of one or more animation selectors
properties // standard jquery animation properties, e.g. { opacity: 0 }
options // standard jquery animation options, e.g. { duration: 750 }