Question

I’m working on a jQuery function to create the “lavalamp” effect on my navigation bar.

Currently it is working micely except for when you hover over an item (e.g. Community Service) then move your mouse away from the navigation bar. When you do this, the #movingBox div returns to the Home item as expected, but only the #movingBox .left div is showing and the other two “disappear”.

I’d like to make it so this glitch doesn’t happen, so I can actually use it in 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>

Thanks for your help!

EDIT: Stupid Mistake on my part :P. In my last animate call I used the hoverItem variables on accident. But, if you are looking for the same functionality feel free to use my code, just remember to fix it.

Answer 1

The problem is in your last lines of javascript code I believe – a little distraction of yours I think. Here…

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

In the above line, change ‘hoverItemWidth’ to ‘activeItemWidth’;

Here’s a fiddle with the fix – http://jsfiddle.net/joplomacedo/TxYe2/