menuTrigger javascript
需要您的帮助我正在制作菜单，首先只显示标题但是当点击菜单图标（现在是深灰色框）时，它会进一步扩展子菜单。
我几乎达到了我想要的效果，但是（卡住）当我点击菜单按钮打开菜单时，我想要淡入淡出效果或动画效果。我没有得到正确的语法，PLZ帮我实现了这个效果。
您可以检查链接上的代码： http://jsfiddle.net/kBpqa/1/
JS：
(function ($) {
$(document).ready(function() {
/* --------- Main Submenu Open/Close --------- */
var menuOpen = false;
// Close menu when pointer leaves expanded menu
$('#headerContainer').mouseleave(
function() {
if( menuOpen == true)
closeSubMenu();
});
// Open/Close menu when user clicks on trigger link
$('.menuTrigger').click(
function(e){
e.preventDefault();
if( menuOpen == true)
closeSubMenu();
else
openSubMenu();
});
// Opens Main Submenu
function openSubMenu(){
$('#mainMenu').addClass('openMenu');
$('#mainMenu').find('ul.menu li ul').show();
var menuHeight = $('#mainMenu').height();
$('#header').height(menuHeight);
$('#mainMenu').find('ul.menu li ul').delay(300).css({'opacity' : 1});
$('#header .extIcons').show(500);
// $('#header .extIcons a').delay(500).css({'opacity' : 1});
// contractLogo();
if ( $(window).width() < 1400 ) {
$('#logo a').html('');
};
menuOpen = true;
}
// Closes Main Submenu
function closeSubMenu(){ $('#mainMenu').removeClass('openMenu');
$('#mainMenu').find('ul.menu li ul').css({'opacity' : 0});
$('#mainMenu').find('ul.menu li ul').delay(500).hide();
var menuHeight = $('#mainMenu').height();
$('#header .extIcons').hide();
$('#header').height(menuHeight);
// contractLogo();
$('#logo a').text('');
menuOpen = false;
}
/* --------- END Main Submenu Open/Close --------- */
});
}
(jQuery));;
HTML：
<div id="header">
<div id="headerContainer">
<div class="block block-menu-block">
<div id="mainMenu">
<ul class="menu">
<li class="first expanded menu-mlid-601 menu-601"><a href="#">About Us</a>
<ul class="menu">
<li class="first leaf menu-mlid-606 menu-606"><a href="#">Title1</a></li>
<li class="leaf menu-mlid-585 menu-585"><a href="#">Title2</a></li>
<li class="leaf has-children menu-mlid-1409 menu-1409"><a href="#">Title3</a></li>
<li class="leaf has-children menu-mlid-616 menu-616"><a href="#">Title4</a></li>
</ul>
</li>
<li class="expanded active-trail active menu-mlid-1107 menu-1107"><a href="#" class="active-trail active">Work</a>
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
<li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>
</ul>
</li>
<li class="expanded menu-mlid-1237 menu-1237"><a href="#">Research</a>
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
<li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>
</ul>
</li>
<li class="expanded menu-mlid-1103 menu-1103"><a href="#">Current Events</a>
<ul class="menu">
<li class="first leaf menu-mlid-1138 menu-1138"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1134 menu-1134"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1137 menu-1137"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1135 menu-1135"><a href="#" title="">Title1 </a></li>
<li class="leaf menu-mlid-1260 menu-1260"><a href="#" title="">Title1</a></li>
<li class="leaf menu-mlid-1261 menu-1261"><a href="#" title="">Title1</a></li>
</ul>
</li>
<li class="last expanded menu-mlid-1105 menu-1105"><a href="#">Contact</a></li>
</ul>
<div class="menuTrigger"><a href="#">Menu</a></div>
</div>
</div>
</div><!-- end headerContainer -->
</div><!-- end header -->
CSS：
div.block-menu-block{float:right; margin-top:0px;background-color: #e7e7e7;}
#headerContainer{background-color:#e7e7e7;}
#mainMenu{margin:0;padding:0;overflow:auto;}
#mainMenu > ul{margin:0;margin-right:65px;padding:0;list-style-type:none;}
#mainMenu li{margin:0;position:relative;}
#mainMenu > ul > li > a{color:#111 !important;display:block;padding:1.6em 1em;font-weight:600; font-size:17px;}
#header a:hover{color:#111 !important;}
#mainMenu > ul > li{float:left;}
div.menuTrigger{padding:.8em 1em 0 0;margin:0;float:right;background:#ccc}
.menuTrigger a{width:40px;height:40px;text-indent:9999em;display:block;overflow:hidden;margin-top:6px;background:url(../images/menu-trigger.png) no-repeat;}
.menuTrigger a:hover{background-position:0 -40px;}
#mainMenu > ul > li > ul{margin:0 3em 3em 1.5em !important;padding:0;display:none; font-size:13px; line-height:1.2em;}
#mainMenu > ul > li > ul > li{max-width:9em;padding:.4em 0;font-size:1em !important;display:block;}
#menu .first leaf menu-mlid-606 menu-606 a{ font-size:14px;}
#mainMenu > ul > li > ul > li > a{font-weight:normal;color:#999 !important;}
li.current{background:#222222;float:left;}