gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 18:33:05 26 4
gpt4 key购买 nike

要求:

示例链接: 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")
});
});
});

最佳答案

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

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

关于javascript - 我们如何在将鼠标悬停在子导航上时停止 Jquery 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13739169/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com