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);
     }
  );

和FIDDLE：

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

我希望这正是你想要的。

修改

我认为您可以按住菜单面板，直到您不选择其他菜单块。请参阅下面的示例代码和FIDDLE，当然：

$('.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/

jQuery悬停显示面板

1 个答案: