1

要求：

示例链接：http: //jtstratford.advisorproducts.com/overview

在此页面上，当我们将鼠标悬停在主导航上时，它们下方的黄线会随着您的鼠标进行动画或移动，这没关系。

但是我们可以让它只在您将鼠标悬停在主要导航上时移动吗？如果说我将鼠标悬停在 Investments 上并转到 Advisors v Brokers 的子导航，黄色条应保留在 Investments 下，它不会随着子导航移动。

下面是JS代码：

// 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

您的选择器错误，您正在查询#magicLine 内的 li 标记中的所有锚点。这可能有效：

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

我相信最好的方法可能是给你的主导航中的每个元素（主页、关于、投资等）一个class. 那么也许只有当您悬停的元素具有该特定类时，您才能制作动画。.hasClass()您可以通过在 jQuery 中调用 a 来做到这一点。

IE

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