Comment rendre mon effet LavaLamp jQuery moins glitch

Question

Je travaille sur une fonction jQuery pour créer l'effet "lavalamp" sur ma barre de navigation.

Actuellement, il fonctionne micely sauf lorsque vous survolez un élément (par exemple, Community Service), puis déplacez votre souris loin de la barre de navigation. Lorsque vous faites cela, le #movingBox div retourne à l'élément d'accueil comme prévu, mais seul le div #movingBox .left est montrant et les deux autres "disparaissent". Je voudrais faire en sorte que ce problème ne se produise pas, donc je peux réellement l'utiliser en production.

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> 

Merci pour votre aide!

EDIT: Erreur Stupide de ma part: P. Dans mon dernier appel d'animation, j'ai utilisé les variables hoverItem en cas d'accident. Mais, si vous recherchez la même fonctionnalité n'hésitez pas à utiliser mon code, n'oubliez pas de le réparer.

Answer 1

Le problème est dans vos dernières lignes de code javascript je crois - un peu de distraction de la vôtre je pense. Ici ...

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

Dans la ligne ci-dessus, le changement 'hoverItemWidth' à 'activeItemWidth';

est ici un violon avec le correctif - http://jsfiddle.net/joplomacedo/TxYe2/