PHP Navigation + jQuery animation - Page Reload

Question

i have a site with a simple PHP-Navigation (using $_GET-Variables).

HTML-code for navigation links (they are floated right):

<a href="index.php?main=test1" class="menuelement">Test 1</a>
<a href="index.php?main=test2" class="menuelement">Test 2</a>
<a href="index.php?main=test2" class="menuelement">Test 3</a>

Simple PHP-codeblock to include pages:

if(!isset($_GET['main'])) {
    $page = "home";
} else {
    $page = $_GET['main'];
}
include($page.".php");

Both codeblocs are on index.php.

The menu-elements are animated with jQuerys .animate() like this (the code is between $(document).ready):

$('.menuelement').hover(function () {
    if ($(this).hasClass('clicked') == false) {             
        $(this).stop(true, false).animate({
            'padding-right': '80px'
        }, 900, 'easeOutBounce');
    }
}, 
function () {
    if ($(this).hasClass('clicked') == false) {     
        $(this).stop(true, false).animate({
            'padding-right': '0px'
        }, 900, 'easeOutBounce');
    }
}
).click(function() {
    if ($(this).hasClass('clicked') == true) {
        //Don't do anything.
    } else {
        $('a.clicked').animate({
            'padding-right': '0px'
        }, 900, 'easeOutBounce');
        $('a.clicked').removeClass('clicked');

        $(this).addClass('clicked');
        $(this).stop(true, false).animate({
            'padding-right': '80px'
        }, 900, 'easeOutBounce');
    }
});

What happens is that the hovered menuelement slides to the left (remember: it's floated right), on mouseout it slides back. On click, it stays where it is and gets a class to mark that it's clicked. If you click on another menuelement, the one which was clicked before slides back and the new one stays slided out. All this is done with addClass, removeClass and some if-else-statements ... quite simple. If the a-Tags of the links doesn't have any linktargets, e. g. only the hash sign () everything works fine.

But as soon as the links have a target (e. g. ), the jQuery-animation starts again when a menuelement is clicked, because index.php is kind of reloaded. The result is that the clicked menuelement won't stay slided out.

I know I could (and I already did) load some content with e. g. .load() into a div. But I don't want to do that concerning SEO and some other aspects.

Is ther any way to use the PHP-navigation and jQuerys fantastic .animate(), without "reloading" the animation each time a link is clicked? Maybe there are some PHP or jQuery hints that I don't know.

Thank you for any help!

Answer 1

You can use event.preventDefault() to stop the browser from following the link and use a complete callback function in animate to load the linked-to page after the animation is done.