gpt4 book ai didi

javascript - 从左侧jquery滑动动画条位置

转载 作者:行者123 更新时间:2023-11-28 00:23:17 25 4
gpt4 key购买 nike

我在导航中的鼠标悬停上有一个滑动动画,它工作正常但是当我将鼠标悬停在任何菜单项上时,滑动条从最左边开始,而不是它应该从导航项开始的地方开始

这是 JSfiddle

$(".mega-navigation--level-one").append("<span class='nav-hover'></span>");
var $magicLine = $(".nav-hover");
$magicLine
.width($(".active > a").innerWidth())
.css("left", $(".nav-hover").position().left - 400)
.data("origLeft", $magicLine.position().left)
.data("origWidth", $magicLine.width());

$(".mega-navigation--level-one > li").hover(function () {
$el = $(this);
leftPos = $el.position().left + 20;
newWidth = $el.width();

$magicLine.stop().animate({
left: leftPos,
width: newWidth,
opacity: 1
});
console.log($magicLine.data("origLeft"));
}, function () {
$magicLine.stop().animate({
left: $magicLine.data("origLeft"),
width: $magicLine.data("origWidth")
});
});
.mega-navigation--level-one {
position: relative;
list-style: none;
padding: 0;
margin: 0 auto;
width:400px;
}
.mega-navigation--level-one > li {
display:inline-block;
margin: 0 10px;
}
.mega-navigation--level-one > li > a {
color:#000;
font-weight:bold;
text-decoration:none;
}
.nav-hover {
position: absolute;
bottom: -12px;
left: 0;
width: 100px;
height: 6px;
background: #04aa84;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="mega-navigation--level-one">
<li>
<a href="#">Menu Item 1</a>
</li>
<li>
<a href="#">Menu Item 2</a>
</li>
<li>
<a href="#">Menu Item 3</a>
</li>
</ul>

最佳答案

请仅向左侧属性添加 10px 而不是 20px:

leftPos = $el.position().left + 10;

你的功能:

$(".mega-navigation--level-one > li").hover(function () {
$el = $(this);
leftPos = $el.position().left + 10;
newWidth = $el.width();

$magicLine.stop().animate({
left: leftPos,
width: newWidth,
opacity: 1
});
console.log($magicLine.data("origLeft"));
}

关于javascript - 从左侧jquery滑动动画条位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54774215/

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