使用jQuery和css3水平滑動面板

Question

我想使滑塊面板從右邊界屏幕向左滑動。 當我「懸停」面板調用者：選項卡時，我希望幻燈片開始移動。當面板移動時，它會推動標籤。我有這樣的代碼：

HTML

<div id="panel"> 
<div class="content"><!-- Content --></div> 
</div> 
<div id="tab">hit me for show panel</div> 

CSS

#tab { 
    width:50px; 
    height:150px; 
    position:fixed; 
    right:0px; 
    top:100px; 
    display:block; 
    cursor:pointer; 
} 
#panel { 
     position:fixed; 
    right:0px; 
    top:50px; 
    background-color:#999999; 
    height:500px; 
    width:0; 
} 
#panel .content { 
    width:290px; 
    margin-left:70px; 
} 

jQuery的

$(function() { 
     $('#tab').hover(function(event) { 
     var panel = $('#panel'); 
     if (panel.hasClass('open')) {  //condition error 
      panel.removeClass('open'); 
      $('.content').fadeOut('slow', function() { 
       $('#panel').stop().animate({ 
        width: '0', 
        opacity: 0.0 
       }, 500) 
      }) 
     } else { 
      panel.addClass('open'); 
      $('#panel').stop().animate({ 
       width: '400', 
       opacity: 1 
      }, 500, function() { 
       $('.content').fadeIn('slow'); 
      }); 
     } 
    }); 
}); 

問題是，當我離開的標籤用鼠標光標 「懸停」 面板，面板消失。只要我將鼠標懸停在標籤和麪板上，我希望面板保持打開狀態。我如何做到這一點？

Answer 1

看到下面的片段

我已經改變了你的JQ了一下。第一，我已經去除了if和可見panel增加了mouseOut功能（帶班open）

所以當你懸停tab，則panel出現，但沒有任何反應上hover out。相反，如果您從中取出mouseout，該面板會再次隱藏。所以，只要你的光標在panel上，它就會保持打開狀態。

作爲一個側面說明，你可以用addClass('open')和removeClass('open')刪除部分，並在mouseout()方法只是從#panel.open只是#panel更改或使用可變panel。如果你不想在CSS或類似的東西中設置.open類，你可以這樣做。

希望它有幫助。讓我知道:)

 $('#tab').hover(function(event) { 
 
     var panel = $('#panel'); 
 
      panel.addClass('open'); 
 
      
 
      $('#tab').stop().animate({ 
 
       'right': '400', 
 
      
 
       
 
      }, 500) 
 
      $('#panel').stop().animate({ 
 
       width: '400', 
 
       opacity: 1 
 
       
 
      }, 500, function() { 
 
       $('.content').fadeIn('slow'); 
 
      }); 
 
    
 
     $('#panel.open').mouseout(function() { 
 
       $(this).removeClass('open'); 
 
       
 
      $('.content').fadeOut('slow', function() { 
 
      $("#tab").removeClass("moveme") 
 
       $('#panel').stop().animate({ 
 
        width: '0', 
 
        opacity: 0.0 
 
      }, 500) 
 
       $('#tab').stop().animate({ 
 
       'right': '0', 
 
      
 
       
 
      }, 500) 
 
     
 
     
 
    }); 
 
    }); 
 
      });

#tab { 
 
    width:50px; 
 
    height:150px; 
 
    position:fixed; 
 
    right:0px; 
 
    top:100px; 
 
    display:block; 
 
    cursor:pointer; 
 

 
} 
 
#panel { 
 
     position:fixed; 
 
    right:0px; 
 
    top:50px; 
 
    background-color:#999999; 
 
    height:500px; 
 
    width:0; 
 

 
} 
 
#panel .content { 
 
    width:290px; 
 
    margin-left:70px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="panel"> 
 
<div class="content"><!-- Content --></div> 
 
</div> 
 
<div id="tab">hit me for show panel</div>