jQuery animation problem

Question

I'm making a hidable div that starts out on the edge of the screen then slides out to the right when a tab is clicked. This part functions as expected, but when I click the tab to make it slide back, it won't do so... any ideas?

JS:

$( "#closediv" ).hide();
$( "#opendiv" ).click( function(){
    $( "#opendiv" ).animate(
        { left: "+=100px" },
        700,
        "easeOutExpo",
        function(){
            $( "#opendiv" ).hide();
            $( "#closediv" ).show();
        }
    );
});

$( "#closediv" ).click( function(){
    $( "#closediv" ).animate(
        { left: "-=100px" },
        "easeOutExpo",
        700,
        function(){
            $( "#opendiv" ).show();
            $( "#closediv" ).hide();
        }
    );
});

CSS:

#closediv
  {
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/closediv.png') bottom;
  }

#closediv:hover
  {
   background-position: 0 0;
  }

#opendiv
  {
   opacity: 0.6;
   display: block;
   width: 30px;
   height: 95px;
   text-indent: -9999px;
   overflow: auto;
   background: url('/aaron.chauvin/sitepics/opendiv.png') bottom;
  }

#opendiv:hover
  {
   background-position: 0 0;
  }

HTML:

<div id="opendiv" style="position:absolute; top:0px; left:0px; z-index:2;">
</div>
<div id="closediv" style="position:absolute; top:0px; left:100px; z-index:2;">
</div>

Sorry about my "block" (modified K&R) indent style, I find it easier to follow than the BSD KNF indent style most people use... =P

Edit: Test page

Answer 1

Did you happen to switch 700 and "easeOutExpo" in #closediv's animate function? If you switch them, the div seems to slide back, but when #opendiv appears, it is back at left:100 To remedy this, you can use:

$("#closediv").hide();
$("#opendiv").click(function(){
    $(this).animate({ left: "+=100px" }, 700, "easeOutExpo",function() {
    $(this).hide();
    $("#closediv").show().css('left', 100);
    });
});

$("#closediv").click(function(){
    $(this).animate({ left: "-=100px" }, 700, "easeOutExpo", function() {
    $("#opendiv").css('left', 0).show();
    $("#closediv").hide();
    });
});

Here's a JSFiddle Link: http://jsfiddle.net/RWnqW