1

Requirement:

Example Link: http://jtstratford.advisorproducts.com/overview

On this page when we hover over Main navigation then their below yellow line animate or move along with your mouse which is ok.

But can we make it so it only moves when you are hovering over the primary navigations? If say I'm hovering over Investments and go to the sub-navigation for Advisors v Brokers, the yellow bar should remain under Investments it will not move along with subnavigation.

Below is the JS Code:

// DOM Ready
$(function () {

    var $el, leftPos, newWidth;

    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#magicLine").append("<li id='magic-line'></li>");

    /* Cache it */
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".selectednav").width())
        .css("left", $(".selectednav a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#magicLine li").find("a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function () {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});
4

2 に答える 2

1

Your selector is wrong, you're querying for all the anchors in a li tag inside #magicLine. This might work:

$("#magicLine > li").children("a")
于 2012-12-06T08:16:51.953 に答える
0

私はそれを実行するための最良の方法はおそらくあなたが持っているあなたの主要なナビゲーションの各要素（ホーム、アバウト、投資など）を与えることだと思いますclass。次に、ホバーしている要素にその特定のクラスがある場合にのみアニメーション化できる可能性があります。.hasClass()これを行うには、jQueryでを呼び出します。

すなわち

if (element.hasClass("primary")) {
//want to animate magic bar
}
于 2012-12-06T07:58:49.033 に答える