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

Question

要求:

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

在这个页面上，当我们将鼠标悬停在主导航上时，它们下面的黄线会随着鼠标移动或移动，这是可以的。

但是我们能否让它只在您将鼠标悬停在主要导航上时移动？如果说我将鼠标悬停在投资上并转到 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")
        });
    });
});

Answer 1

您的选择器是错误的，您正在查询 #magicLine 内 li 标签中的所有 anchor 。这可能有效:

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