jquery滑出功能

一、 <div id="box-cl-keleyi-com" class="box-cl-keleyi-com">
          <div id="sideBarTab">
       <img src="../resource/images/index/slide-button.png" alt="sideBar" id="sideBarImg" />
       <img src="../resource/images/index/slide-button-active.png" alt="sideBar" id="sideBarImg-    a"                     style="display:none"/>
   </div>
  <div id="sideBarContents" style="display:none;">
   <div id="sideBarContentsInner">
    <div class="part-cl">
     <div id="calendar" style="width: 186px; height: 176px;"></div>
    </div>
   </div>
  </div>
 </div>

二、

/**
 * 滑过显示,滑出隐藏
 */
 $('#sideBarTab').mouseenter(function(){
  $('#sideBarContents').show(
   100,function(){
    WdatePicker({eCont:'calendar',onpicked:function(dp){queryPlanInfo(dp.cal.getDateStr())}});
     } 
  );
  $('#sideBarImg').hide();
  $('#sideBarImg-a').show();
 });

 $('#box-cl-keleyi-com').mouseleave(function(){
  $('#sideBarContents').hide();
  $('#sideBarImg-a').hide();
  $('#sideBarImg').show();
 });

三、

#box-cl-keleyi-com h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
#box-cl-keleyi-com {font-size:12px;font-family:Arial, Helvetica, sans-serif;}
#box-cl-keleyi-com a{ text-decoration:none; color:#333;outline: none;}
#box-cl-keleyi-com a:hover{ color:#316ac5; font-weight:bold;}
#box-cl-keleyi-com{text-align:left;position: fixed; width: auto;height: auto; top: 133px;right:0px;}
#box-cl-keleyi-com li{ height:16px;padding:2px;display:block;width:177px; list-style:none}
#sideBarTab{float:left;height:90px;width:30px; }
#sideBarTab img{ display:block; width:30px;}
#sideBarContents{float:left;overflow:auto; overflow-x:hidden; !important;width:200px;height:200px;border:1px solid #e5e5e5; border-right:none; background:#ffffff;}
#sideBarContentsInner{width:600px;}
.part-cl{ width:100%; padding-top:10px;}
.part-cl h3{ font-size:14px; height:16px; margin:5px 0 0 5px;}
.part-cl ul{ padding-left:15px;}
body{margin:0px;}