javascript - Slide Menu Transition -

I have a left slide in the menu when I load the page, it animates and automatically "slide These "my transition speed are set in CSS" The problem is that there is a very uncompressed transition in the call function (see below). If I add a speed (300) Click, it does not work at all.

The script is:

  & lt; Script & gt; $ (Document) .ready (function () {$ ('# showLeft'). Click ();}); & Lt; / Script & gt;   
 CSS changes:  
 . Cbp-spmenu {-webkit-transition: All 0.3s Easy; -Moz infection: all 0.3s easily; Transition: All 0.3s ease;   
}  
 If anyone has any ideas or advice about smooth transition slide I should be very obliged.  
 Javascript:  
  // slidemenu.js var menu lift = document.getElementById ('cbp-spmenu-s1'), showLeft = document .getElementById ('showLeft' ), Body = document. Body; ShowLeft.onclick = function () {classie.toggle (this, 'active'); Classie.toggle (menu lift, 'CBP-Spenmenu-Open'); Disabled other ('show-left'); }; Function disabled other (button) {if (button! == 'show-left') {classicaglag (show-left, 'disabled'); }}   
 HTML  
  & lt; Body class = "cbp-spannu-push" & gt; & Lt ;! - Side menu - & gt; & Lt; Nav class = "cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id = "cbp-spmenu-s1" & gt; & Lt; Button id = "showLeft" class = "menu open" & gt; & Lt; I class = "icon-reorder icon-small" & gt; & Lt; / I & gt; & Lt; / Button & gt; & Lt; Div class = "side-panel-top" & gt; & Lt; A href = "index.html" id = "logo" & gt; & Lt; Img src = "picture / background / logo.png" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Ul class = "sidemenu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Twitter & lt; I class = "icon-chevron-right icon-small" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; Ul class = "sidesub" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Twitter & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Read & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Twitter & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Jithub & lt; I class = "icon-chevron-right icon-small" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Facebook & lt; I class = "icon-chevron-right icon-small" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Jithub & lt; I class = "icon-chevron-right icon-small" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Facebook & lt; I class = "icon-chevron-right icon-small" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; Try it inside  $ (document) .ready (function ()).    
 
  
  $ ("# id sliding Want "). Animate ({left: '- 200px'});   
 or