我该如何让我的jQuery LavaLamp效果更少毛病

Question

我正在研究一个jQuery函数来在我的导航栏上创建“lavalamp”效果。

目前它正在工作，除了鼠标悬停在某个项目上（例如社区服务）之外，然后将鼠标移离导航栏。当你这样做时，#movingBox div如预期的那样返回到Home项目，但只有#movingBox .left div显示，另外两个“消失”。

我想这样做，所以这个毛刺不会发生，所以我可以在生产中实际使用它。

HTML

<div id="navArea"> 
    <div id="navBar" class="noscript"> 
     <ul class="parent"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">After Care</a></li> 
     <li><a href="#">Repair</a></li> 
     <li><a href="#">Store</a> 
      <ul class="sub"> 
       <li><a href="#">Cat 1</a></li> 
       <li><a href="#">Cat 2</a></li> 
       <li><a href="#">Cat 3</a></li> 
       <li><a href="#">Cat 4</a></li> 
      </ul></li> 
     <li><a href="#">Events</a></li> 
     <li><a href="#">Community Service</a></li> 
     </ul> 
    <div id="movingBox"> 
     <div class="left"></div> 
     <div class="middle"></div> 
     <div class="right"></div> 
    </div> 
    </div> 
</div> 

<div id="mainContent"> 
</div> 

CSS

#navArea{ 
height: 48px; 
width: 100%; 
background-image: url(../img/navBG.png); 
background-repeat: repeat-x; 
font-size: 15px; 
font-family: 'BPreplayBold', Helvetica, Arial, sans-serif; 
} 
#navBar { 
margin-right: auto; 
margin-left: auto; 
position: relative; 
width: 636px; 
} 
#navBar ul{ 
padding: 0; 
margin: 0; 
z-index: 20; 
position: absolute; 
} 
#navBar ul li{ 
float: left; 
list-style: none; 
} 
#navBar ul li a{ 
padding-left: 15px; 
padding-right: 15px; 
height: 45px; 
display: block; 
text-decoration: none; 
text-align:center; 
line-height: 45px; 
color: #EBEBEB; 
} 
#navBar ul li ul li{ 
width: 222px; 
float: none;  
} 
#navBar ul li ul li a{ 
padding: 0px 15px; 
display:block; 
height:25px; 
line-height:25px; 
background: url('../img/navBG.png'); 
background-repeat: repeat-x;  
} 
#navBar ul li ul li a:hover{ 
background: #2abcf2;  
} 

#navBar #movingBox { 
height: 46px; 
width: 70px; 
left: 0; 
top: 0; 
z-index: 19; 
position: absolute; 
} 
#navBar #movingBox .left { 
background-image: url(../img/hBoxL.png); 
float: left; 
width: 7px; 
height: 46px; 
} 
#navBar #movingBox .right { 
float: left; 
height: 46px; 
width: 7px; 
background-image: url(../img/hBoxR.png); 
} 
#navBar #movingBox .middle { 
background-image: url(../img/hBoxM.png); 
background-repeat: repeat-x; 
height: 46px; 
float: left; 
width: 56px; 
} 

jQuery的

<script type="text/javascript"> 
$(document).ready(function() { 
$("#navBar").removeClass("noscript"); 
$("#navBar ul.sub").hide(); 
$("#navBar li").hover(function(){ 
    $(this).find('ul.sub').slideToggle(150); 
}); 
$("#navBar li").mouseover(function(){ 
    hoverItemLeft = Math.round($(this).offset().left - $("#navBar").offset().left); 
    hoverItemWidth = $(this).width(); 
    $("#movingBox").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth}, 350, 'easeOutBack'); 
    $("#movingBox .middle").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth-17}, 350, 'easeOutBack'); 
}); 
$("#navBar").mouseleave(function(){ 
    activeItemLeft = Math.round($("#navBar li.active").offset().left - $("#navBar").offset().left); 
    activeItemWidth = $("#navBar li.active").width(); 
    $("#movingBox").stop().animate({"left": activeItemLeft, "width": activeItemWidth}, 350, 'easeOutBack'); 
    $("#movingBox .middle").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth-17}, 350, 'easeOutBack'); 
}); 
}); 
</script> 

感谢您的帮助！

编辑：在我的部分愚蠢的错误：P。在我最后的动画调用中，我偶然使用了hoverItem变量。但是，如果您正在寻找相同的功能，请随时使用我的代码，请记住修复它。

Answer 1

问题是在您的JavaScript代码的最后一行我相信 - 我觉得你有点分心。这里...

$("#movingBox .middle").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth-17}, 350, 'easeOutBack'); 

在上面的行中，将'hoverItemWidth'改为'activeItemWidth';

下面是与修复小提琴 - http://jsfiddle.net/joplomacedo/TxYe2/