[SOLVED] slideUp/Down working but not sliding

[SOLVED] slideUp/Down working but not sliding

I'm trying to use slideUp and slideDown, they seem to be working in terms of being Up and Down but there is no sliding between these states, any ideas?

My CSS:
  1. #sub-nav{
  2. width:240px;
  3. min-height:240px;
  4. padding:0;
  5. background:url(../images/80-opacity-bg-fill-purple.png) repeat;
  6. overflow:hidden;
  7. position:relative;
  8. z-index:4;
  9. display:none;}

    .sub-nav{margin:0; padding:20px 0;}


  10. .sub-nav > li{
  11. border-bottom:1px dotted #fff;
  12. width:200px;
  13. margin:0 0 0 20px;
  14. list-style:none;
  15. font-family:Tahoma, Geneva, sans-serif;
  16. font-size:13px;}

  17. .sub-nav > li > a{
  18. display:block;
  19. padding:4px 10px;
  20. text-decoration:none;
  21. color:#fff;}

  22. .sub-nav > li > a:hover{color:#462237; background:url(../images/80-opacity-bg-fill.png) repeat;}

  23. #toggle{
  24. display:block;
  25. background:#000;
  26. color:#fff;
  27. max-width:60px;
  28. height:30px;
  29. line-height:26px;
  30. text-decoration:none;
  31.  text-align:center;
  32. outline:none;}

  33. #toggle a{text-decoration:none; color:#fff; font-size:15px;}


My HTML:
  1. <div id="sub-content">

    <div id="sub-nav">
    <div class="clear">
    <ul class="sub-nav">

    <li class="selected"
    >
    <a href="call-us/">Call Us</a>






    </li>

    </ul><!-- /.sub-nav -->
    </div><!-- /.clear -->
    </div><!-- /#nav-sub -->
    <div id="toggle">
    <a id="open" class="open" href="#">&darr; Menu</a>
    <a id="close" style="display: none;" class="close" href="#">&uarr; Menu</a> 
    </div>


    </div><!-- /#sub-content -->










and my JS

  1. <script type="text/javascript">
    $(document).ready(function() {
        $('#buttonOne').jFav();

        $("#open").click(function(){
            $("#sub-nav").slideDown("555");   
        });   
       
        $("#close").click(function(){
            $("#sub-nav").slideUp("555");   
        });       
       
        $("#toggle a").click(function () {
            $("#toggle a").toggle();
        });       
           
    });

    </script>



















Thanks for looking, hope you can help.

[UPDATE]

I have found the problem was because of having a min-height set.
If anyone has a solution I could use to find the height of the menu once 
it has 'rendered/parsed' and apply that to the js 
that would really be appreciated, thanks.

[EXTRA EDIT]



Ok no need for js/jq I just inserted another div with a min height which
 gives the div I want to affect a height for the jq to use





SOLVED