jquery指定css框

Question

嘿傢伙我有問題指定我的JQuery SlideToggle行動到特定的標籤（文本框）目前它正在整個菜單中使用整個SlideToggle動作。當您懸停在一個菜單選項卡上時，我需要在每個菜單選項卡上的分隔線之間的綠色滑動框。需要幫助...

http://jsfiddle.net/jfarr07/yKF65/1/

HTML

<div id="navigation"> 
<div class="panel"></div> 
    <ul id="nav"> 
     <li class="nav"><a href="#">HOME</a></li> 
     <li class="nav"><a href="#">OUR STORY</a></li> 
     <li class="nav"><a href="#">GALLERY</a></li> 
     <li class="nav"><a href="#">GIFT REGISTRY</a></li> 
    </ul> 
</div> 

CSS

body, html { 
padding:0; 
margin:0; 
background:url(../../Portfolio/images/wood2.png); 
} 
a:link { 
text-decoration:none; 
color:#000; 
font-family:open-sans, HelveticaNeue, Helvetica Neue Condensed Bold, Helvetica Neue, serif; 
} 
a:visited { 
color:#000; 
} 
a:hover { 
color:#FFF; 
} 
#navigation { 
width:auto; 
height:30px; 
background:rgba(0, 0, 0, .25); 
} 
ul#nav { 
display:inline; 
} 
li.nav { 
display:inline-block; 
margin: 0px 0px 0px 30px; 
padding:0px 0px 0px 30px; 
position:relative; 
} 
li~li { 
border-left: 1px solid #000000; 

} 
.panel { 
position:absolute; 
background:#0F3; 
background-size:100%; 
height:30px; 
display:none; 
width:100%; 
} 

JQuery的

<script> 
$(document).ready(function() { 
    $("li.nav").hover(function() { 
     $("#navigation").find(".panel").stop().slideToggle("fast"); 
    }, function() { 
     $("#navigation").find(".panel").stop().slideToggle("fast"); 
    }); 
}); 
</script> 

Answer 1

試試下面

<script type="text/javascript"> 

    $(function() 
    { 
     $("li.nav").hover(function() 
     { 
      var x = $(this).offset().left; 
      var y = $(this).offset().top; 
      //var w = $(this).width(); 
      var totalWidth = $(this).width(); 
      totalWidth += parseInt($(this).css("padding-left"), 10) + parseInt($(this).css("padding-right"), 10); //Total Padding Width 
      totalWidth += parseInt($(this).css("margin-left"), 10) + parseInt($(this).css("margin-right"), 10); //Total Margin Width 
      totalWidth += parseInt($(this).css("borderLeftWidth"), 10) + parseInt($(this).css("borderRightWidth"), 10); //Total Border Width 
      var h = $(this).height(); 

      //$("#navigation").find(".panel").stop().slideToggle("fast"); 
      $("#navigation").find(".panel").animate({ 
       top: y, 
       left : x 
      }, 0).css({'width' : totalWidth, 
       'height' : h, 
       'position' : 'absolute'}).slideDown(50).css('display','block'); 

     }, function() { 
      $("#navigation").find(".panel").stop().slideUp("fast"); 
     }); 
    }); 

</script> 
<div id="navigation"> 
<div class="panel"></div> 
    <ul id="nav"> 
     <li class="nav"><a href="#">HOME</a></li> 
     <li class="nav"><a href="#">OUR STORY</a></li> 
     <li class="nav"><a href="#">GALLERY</a></li> 
     <li class="nav"><a href="#">GIFT REGISTRY</a></li> 
    </ul> 
</div>