在mouseout上刪除類jquery

Question

我使用的jquery滑動菜單非常棒！

我需要在子類中添加當鼠標移開

代碼如下

<script type="text/javascript"> 
     $(function() { 
      /* position of the <li> that is currently shown */ 
      var current = 0; 

      var loaded = 0; 
      for(var i = 1; i <5; ++i) 
       $('<img />').load(function(){ 
        ++loaded; 
        if(loaded == 4){ 
         $('#bg1,#bg2,#bg3,#bg4').mouseover(function(e){ 

          var $this = $(this); 
          /* if we hover the current one, then don't do anything */ 
          if($this.parent().index() == current) 
           return; 

          /* item is bg1 or bg2 or bg3, depending where we are hovering */ 
          var item = e.target.id; 

          /* 
          this is the sub menu overlay. Let's hide the current one 
          if we hover the first <li> or if we come from the last one, 
          then the overlay should move left -> right, 
          otherwise right->left 
          */ 
          if(item == 'bg1' || current == 2) 
           $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-265px 0)"},300,function(){ 
            $(this).find('li').hide(); 
           }); 
          else 
           $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(198px 0)"},300,function(){ 
            $(this).find('li').hide(); 
           }); 

          if(item == 'bg1' || current == 2){ 
           /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */ 
           $('#menu > li').animate({backgroundPosition:"(-760px 0)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(item); 
           move(1,item); 
          } 
          else{ 
           /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */ 
           $('#menu > li').animate({backgroundPosition:"(760px 0)"},0).removeClass('bg1 bg2 bg3 bg4').addClass(item); 
           move(0,item); 
          } 

          /* 
          We want that if we go from the first one to the last one (without hovering the middle one), 
          or from the last one to the first one, the middle menu's overlay should also slide, either 
          from left to right or right to left. 
          */ 
          if(current == 2 && item == 'bg1'){ 
           $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300); 
          } 
          if(current == 0 && item == 'bg4'){ 
           $('#menu .sub'+parseInt(current+3)).stop().animate({backgroundPosition:"(266px 0)"},300); 
          } 


          /* change the current element */ 
          current = $this.parent().index(); 

          /* let's make the overlay of the current one appear */ 

          $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){ 
           $(this).find('li').fadeIn(); 
          }); 
         }); 
        } 
       }).attr('src', 'images/'+i+'.jpg'); 


      /* 
      dir:1 - move left->right 
      dir:0 - move right->left 
      */ 
      function move(dir,item){ 
       if(dir){ 
        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200); 
        $('#bg2').parent().stop().animate({backgroundPosition:"(-190px 0)"},300); 
        $('#bg3').parent().stop().animate({backgroundPosition:"(-380px 0)"},400); 
        $('#bg4').parent().stop().animate({backgroundPosition:"(-570px 0)"},400,function(){ 

         $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4').addClass(item); 
        }); 
       } 
       else{ 
        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){ 
         $('#menuWrapper').removeClass('bg1 bg2 bg3 bg4').addClass(item); 
        }); 
        $('#bg2').parent().stop().animate({backgroundPosition:"(-190px 0)"},300); 
        $('#bg3').parent().stop().animate({backgroundPosition:"(-380px 0)"},200); 
        $('#bg4').parent().stop().animate({backgroundPosition:"(-570px 0)"},200); 
       } 
      } 
     }); 
    </script> 

HTML中的刪除功能如下：

<div id="content" style="float: right;"><div id="menuWrapper" class="menuWrapper bg1" style="height:188px!important;"> 

      <ul class="menu" id="menu"> 
       <li class="bg1" style="background-position:0 0;"> 
        <a id="bg1" class="selected" href="#">menu1</a> 
        <ul class="sub1" style="background-position:-265px 0;"> 
         <li></li> 

        </ul> 
       </li> 
       <li class="bg1" style="background-position:-190px 0px;"> 
        <a id="bg2" href="#">menu2</a> 
        <ul class="sub2" style="background-position:-265px 0;"> 
         <li></li> 

        </ul> 
       </li> 
       <li class="bg1" style="background-position:-380px 0px;"> 
        <a id="bg3" href="link.htmlp">menu3</a> 
        <ul class="sub3" style="background-position:-265px 0;"> 
         <li></li> 

        </ul> 
       </li> 
       <li class="last bg1" style="background-position:-570px 0px;"> 
        <a id="bg4" href="#">menu4</a> 
        <ul class="sub4" style="background-position:-266px 0;"> 
         <li></li> 

        </ul> 
       </li> 
      </ul> 
     </div> 
     </div> 

Answer 1

看看jQuery的hover()，它採用了更適當的mouseenter和mouseleave事件。