jQuery懸停顯示面板

Question

這很簡單，我確定但卻困擾着我。低了下去鏈路上徘徊時，我有下面的代碼滑動面板，我有問題是面板滑回下來，當我移動到它（因爲我已經移出了扳機）

$('#menu-item-245').hover(
    function() { 

     var captionHeight = $('.fullTimeSection').height(); 
     captionHeight = parseInt(captionHeight, 10); 
     var topHeight = 190 - captionHeight; 
     var topHeight =+ topHeight + 'px'; 

     $('.fullTimeSection').stop().animate(
     { 
      top: topHeight 

     }, 
     500 
     ); 
    }, 
    function() { 
     $('.fullTimeSection').animate(
     { 
      top: '190px' 

     }, 
     500 
     ); 
    } 
); 

HTML基本上是這樣的：

<div id="panelHolder"> 

    <div class="fullTimeSection"> 
     Slide panel content here... 
    </div> 

    </div> 

    <ul> 
    <li id="#menu-item-245"><a href="page.html">Page</a></li> 
    <li><a href="page.html">Page</a></li> 
    <li><a href="page.html">Page</a></li> 
    </ul> 

任何幫助真的很感激。

謝謝

Answer 1

謝謝你的小提琴樣品。請參見下面的代碼來解決問題：

HTML：

<div id="wrapper"> 
    <div id="panelHolder"> 
     <div class="panel" id="fullTimeSection">Content 1!</div>  
     <div class="panel" id="sixthFormSection">Content 2!</div>  
     <div class="panel" id="partTimeSection">Content 3!</div> 
    </div>  

    <nav role="category-navigation" id="catNav"> 
     <ul id="menu-sections" class="section-menu"> 
      <li class="menu-item" data-id="fullTimeSection"><a href="#">Full Time</a></li> 
      <li class="menu-item" data-id="sixthFormSection"><a href="#">Sixth Form</a></li> 
      <li class="menu-item" data-id="partTimeSection"><a href="#">Part TIme</a></li> 
     </ul> 
    </nav>  
</div> 

CSS：

#wrapper {width:100%; padding:0; position:relative; height:250px; margin-top:250px;} 
#catNav ul {list-style-type:none; padding:0; margin:0;} 
#catNav li {width:100px; display:inline-block; border:1px solid red;} 

#panelHolder {position:absolute; top:-190px; width:100%; height:190px; overflow:hidden;} 

.panel{width:94%; height:170px; padding:10px 3%; color:white; position:absolute; top:190px;} 

.panel#fullTimeSection {background:#870057;} 
.panel#sixthFormSection {background:#232323;} 
.panel#partTimeSection { background:#555555;} 

JS：

$('.menu-item').hover(
    function() { 
     var panel = $('#' + $(this).data('id')); 
     var captionHeight = panel.height(); 
     captionHeight = parseInt(captionHeight, 10); 
     var topHeight = 190 - captionHeight; 
     var topHeight =+ topHeight + 'px'; 
     panel.stop().animate({ top: topHeight }, 500); 
    }, 
    function() { 
     $('#' + $(this).data('id')).animate({ top: '190px' }, 500); 
    } 
); 

和小提琴：

http://jsfiddle.net/QE67u/10/

我希望這是你想要什麼。

編輯

我想你可以牽住菜單面板，直到你不選擇其他菜單塊。請參見下面的示例代碼和小提琴，當然：

$('.menu-item').hover(
    function() { 
     $('.panel').animate({ top: '190px' }, 500); 

     var panel = $('#' + $(this).data('id')); 
     var captionHeight = panel.height(); 
     captionHeight = parseInt(captionHeight, 10); 
     var topHeight = 190 - captionHeight; 
     var topHeight =+ topHeight + 'px'; 
     panel.stop().animate({ top: topHeight }, 500); 
    } 
); 

http://jsfiddle.net/QE67u/14/