Javascript 使用addClass（）切换非画布菜单

我目前正在构建一个Yii应用程序，我想在其中创建自己的非画布导航

它会淡入，但我希望它以0.5s的过渡从左侧滑入。如何使用jQuery切换此选项？我应该使用类似于

addClass（）

的东西吗

这是我的HTML：

<div id="menu"> 
  <button id="toggle-menu">Toggle</button>  
    <ul class="navigation">
      <li class="nav-item"><?php $this->widget('zii.widgets.CMenu',array(
            'items'=>array(
                array('label'=>'Home', 'url'=>array('lunch/home')), 
                array('label'=>'Inschrijven', 'url'=>array('lunch/participate'), 'visible'=>!Yii::app()->user->isGuest),    
                array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
                array('label'=>'Beheer lunches', 'url'=>array('/lunch/admin'),  'visible'=>Yii::app()->user->name=="DeBaas"),
                array('label'=>'Beheer gebruikers', 'url'=>array('/users/admin'),  'visible'=>Yii::app()->user->name=="DeBaas"),
                array('label'=>'Log uit ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
            ),
        )); ?>
    </li>
  </ul> 
</div>

还有我的JavaScript：

$(document).ready(function() {
    $("#toggle-menu").click(function() {
        $('#menu').fade('slow')
    });
});

---

对于使用jquery进行滑动，可以使用.animate（）

差不多

$('#menu')animate({
   left: "-=300",
}, 500, function() {
   // Animation complete.
});

$('#menu')animate({
   left: "-=300",
}, 500, function() {
   // Animation complete.
});