html - Sliding effect its not working in jQuery -

i trying custom navigation, sliding effect not working expected. please @ code , let me know suggestion.

demo link

html

<div style="width:320px;height:320px;border:1px solid red;">   <div id="col1" style="float:left">     <div id="menu">slide div</div>   </div>   <div id="col2">     <div>this content display on page load. <br/>       onclick of "slide" button entire thing move right side , menu div should slide in left displaying without sliding effect.       <input type="button" id="slide-btn" value="slide"/>     </div>   </div> </div> 

css

#menu{display:none} 

js

$(document).ready(function(){     $('#slide-btn').click(function(){         $('#menu').css({'display':'block','width':'170px','border':'1px solid blue','height':'320px'});         $('#menu').show("slide",{direction:"up"},2000);      }); }); 

picture representation references here

http://www.mobile-patterns.com/custom-navigation http://img2.mobile-patterns.com/img/320/1398782204339-2014-04-29%2010.35.53.png

you're setting #menu width 170, @ it's target width. set width 0, animate width.

$('#menu').css({'display':'block','width':'0','border':'1px solid blue','height':'320px'}); $('#menu').animate({width:170},2000);