Content inside div shows after animate

Content inside div shows after animate

Basically, I am trying to animate the width based on the click of a div similar to an example I found online ( jQuery Top Panel), and it seems to almost work.

I can get this to go from not visible to showing, then to animating, but the problem is when I go to set my width to zero.  What is happening is that it will show the contents just to the right of the div.

Please help me out dudes.  It appears as though once I do an animation, I am unable to touch the css of a div and at the same token, when I set the width back to zero, this is showing the contents of the div to the right even though the div itself has zero width (and it actually appears to have zero width).

Let me show you some code.

This is the html I am using:
  1. <div id="LoginSliderButtonShow" style="display: block;">
  2.                     Login Here
  3. </div>
  4. <div id="LoginSliderButtonHide" style="display: none;">
  5.                   Hide
  6. </div>
  7. <div id="LoginBackground">
  8.       <div id="Login">
  9. <table>
            <tr>
                <td>
                    UserName:
                </td>
                <td>
                    <input type="text" id="username" name="username">
                </td>
            </tr>
            <tr>
                <td>
                    Password:
                </td>
                <td>
                    <input type="password" id="password" name="password">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="login" id="login" value="Login">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type=checkbox id="savepw" name="savepw">Remember Me
                </td>
            </tr>
            <tr>
                <td>
                    <div id="login_link" onclick="JSLink('newuser');">
                        New User
                    </div>
                </td>
                <td>
                    <div id="login_link" onclick="JSLink('ForPass');">
                        Forgot Password?
                    </div>
                </td>
            </tr>
        </table>






































  10.        </div>
  11. </div>
And this is the jQuery I am using:
  1.     $("#LoginSliderButtonShow").click(function(){
                $("#LoginSliderButtonShow").css("display", "none");
                $("#LoginSliderButtonHide").css("display", "block");
                $("#Login").show();
                $("#Login").animate({ width: "300px" });
                  $("#Login").animate({ width: "250px" });
        });
       
        $("#LoginSliderButtonHide").click(function(){
                $("#LoginSliderButtonShow").css("display", "block");
                $("#LoginSliderButtonHide").css("display", "none");
                $("#Login").animate({ width: "300px" });
                  $("#Login").animate({ width: "0px" });
                  $("#Login").Hide();
        });