Toggled and animated anchor links do not navigate anymore

Question

I am using jQuery.toggle and .animate for a navigation menu that sits at the bottom of the page. The nav consists of two divs, one as a outer container and the other as a inner container that holds the nav buttons etc.

What I am trying to achieve is; you click on the nav and it's position animates up and to close the nav you simply click on it again and it animates back down to it's original position at the bottom of the page.

The issue I am having is when you click on the nav buttons nothing happens, it doesn't take you to the link like it should even though the browser status bar shows the target URL.

Here's a link

jQuery:

$('#navContainer').toggle(function() {
    $('#navInner').animate({
        bottom: '+=350'
    }, 400, 'swing', function() {
    });
}, function() {
    $('#navInner').animate({
        bottom: '-=350'
    }, 400, 'swing', function() {
    });
});

CSS:

#navContainer {
    background-color:#0FF;
    height:520px;
    margin:0px 0px 0px 60px;
    position:fixed;
    cursor:pointer;
    bottom: 0px;
}

#navInner {
    background:url(../images/appinstructions/nav2.png);
    background-repeat:no-repeat;
    width:638px;
    height:491px;
    position:absolute;
    bottom:-350px;
}

HTML:

<div id="navContainer">
    <div id="navInner">
        <a id="navhomeBtn" href="appInstuc.html"></a>  
        <a id="navhelpBtn" href="appInstuc.html"></a>
        <a id="geBtn" href="http://www.ge.com/" target="_blank"></a>
        <div id="pages">
            <a href="ipadApp1.html"><img src="images/appinstructions/page1.png" alt="page 1"   class="page"/></a>
            <a href="app1-1.html"><img src="images/appinstructions/page2.png" alt="page 2" class="page"/></a>
            <a href="appRoots.html"><img src="images/appinstructions/page3.png"  alt="page3"class="page"/></a>
        </div><!--close pages--> 
    </div><!--close navInner--> 
</div><!--close navContainer--> 

Answer 1

The problem seems to be with the .toggle function, if you use .click the links work. The reason the links don't work using .toggle is because the links are children of the #navInner div, so clicking the link fires the .toggle event.

I would suggest doing something like this instead:

var showing = false;
$('#navInner').click(function(e){

    if(e.target != this) return;

    // Work out which direction we're moving in
    var topValue = "";
    if(showing){
        topValue = "+=350";
    } else {
        topValue = "-=350";
    }   

    // Change the showing variable to opposite
    showing = !(showing);

    // Begin the animation
    $(this).animate({ 
        top: topValue
    }, 400, 'swing', function(){
        // Do nothing
    });

});

This will give you the effect of the toggle method, but if you click one of the child elements it will not animate the #navInner div.

If you do want it to still animate the #navInner div, just remove the following line:

if(e.target != this) return;

(although because they are links and taking you off to a different page, I doubt animating the #navInner div is need)