Question

要求：

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

在此页面上，当我们将鼠标悬停在主导航栏上时，它们的黄色线下方会生成动画或与鼠标一起移动，这是正确的。

但是我们可以做到这一点，只有当你在主要航海上空盘旋时它才会移动吗？如果说我徘徊在投资上并转到Advisors v Brokers的子导航栏，那么黄色栏应该保留在投资之下，它不会随着子导航一起移动。

以下是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")
        });
    });
});

Answer 1

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

$("#magicLine > li").children("a")

Answer 2

我认为最好的方法是将主导航中的每个元素（主页，关于，投资等）设为class。那么也许你只能在你悬停的元素上设置该特定类的动画。您可以通过在jQuery中调用.hasClass()来完成此操作。

即

if (element.hasClass("primary")) {
//want to animate magic bar
}

如何在将鼠标悬停在子导航上时停止Jquery动画？

2 个答案: