Baffleing problem with .animate?

Baffleing problem with .animate?

Hi,

I really hope someone can help me, being pretty new to jQuery, I seem to be going round in circles. This may seem like a long winded explanation but hopefully it will save 100 words!

You can see the problem I am having here: http://www.mememedia.co.uk/april/test.html

I have two yellow slithers with arrows on the edges of the browser that when clicked cause a blacked out div to slide in from either left or right. Followed by a mouse out function that causes the div to slide back out of view when the cursor leaves the black div.

I've used .animate({width:'show'}); & .animate({width:'hide'}); to do this.

In the background of the div's are images which down one side have an arrow. As the animation runs the arrow is down the leading edge and should slide out pointing the way for div to follow. The right side is perfect but the left side the div seems to expand only revealing the arrow at the end of the animation!

This has been driving me mad, does anyone one have any ideas. The CSS for the separate divs is virtually identical and so is the jQuery as far as I can see. I am new to this so please be kind about my rather childlike scripting!
  1. #content #mygallery .nav {
        position: absolute;
        left: 0%;
        z-index: 4;
        height: 600px;
        width: 300px;
        background-image: url(../images/navBkGround.png);
        clear: left;
        float: left;
    }
    #content #mygallery #navRight {
        position: absolute;
        right: 0%;
        z-index: 4;
        height: 600px;
        width: 300px;
        background-image: url(../images/navBkGroundright.png);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #CCCC00;
        clear: right;
        float: right;
    }
























  1. /*Left menu hide*/
        jQuery('.nav').show();
        jQuery('#logo').show();
        jQuery('#toggleButton').hide();
        jQuery('.nav').mouseleave(function() {
        jQuery('#logo,.navLinks').fadeOut(200);
        jQuery('.nav').delay(400).animate({width:'hide'}, 1000);
        jQuery('#toggleButton').delay(500).fadeIn(500);
        });
       
    /*Left menu show*/
        jQuery('#toggleButton').click(function() {
        jQuery('.nav').animate({width:'show'}, 1000);
        jQuery('#logo,.navLinks').delay(600).fadeIn(200);
        jQuery('#toggleButton').delay(200).fadeOut(500);
        });
       
    /*Right menu hide*/
        jQuery('#navRight').hide();
        jQuery('#navRight').mouseleave(function() {
        jQuery('#projectText').fadeOut(200);
        jQuery('#navRight').delay(400).animate({width:'hide'}, 1000);
        jQuery('#toggleButtonRight').delay(500).fadeIn(500);
        });
       
       
    /*Right menu show*/
        jQuery('#toggleButtonRight').click(function() {
        jQuery('#navRight').animate({width:'show'}, 1000);
        jQuery('#projectText').delay(600).fadeIn(200);
        jQuery('#toggleButtonRight').delay(200).fadeOut(500);
        });































Any ideas would be greatly appreciated. I have tried to use the .animate({left: '-=300'} way but this causes the animation to crash very randomly meaning you need to refresh the browser. I may do this problem as a separate post!

Thank you all in advance.