1

ナビゲーションバーに「lavalamp」効果を作成するためにjQuery関数に取り組んでいます。

現在、アイテム（コミュニティサービスなど）にカーソルを合わせてナビゲーションバーからマウスを離す場合を除いて、マウスで動作しています。これを行うと、＃movingBox divは期待どおりにHomeアイテムに戻りますが、＃movingBox .left divのみが表示され、他の2つは「消えます」。

このグリッチが発生しないように作りたいので、実際に本番環境で使用できます。

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変数を使用しました。ただし、同じ機能をお探しの場合は、私のコードを自由に使用してください。修正することを忘れないでください。

4

1 に答える 1

1

問題は、私が信じているjavascriptコードの最後の行にあります。ここ...

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

上記の行で、「hoverItemWidth」を「activeItemWidth」に変更します。

これが修正のフィドルです-http://jsfiddle.net/joplomacedo/TxYe2/

于 2012-07-22T17:57:11.773 に答える