JQuery Navigation Items（锚标签）下的线条动画

Question

我目前正在重做我的投资组合网站，这是一项正在进行中的工作。我遇到了一个使用 jquery 的教程，该教程允许在悬停时在锚元素下方设置一条线，这非常简洁。我目前有两个问题。

它在悬停时获得了适当的宽度和左侧位置，但是当悬停未激活时它似乎没有获取适当的属性。
我不确定如何更新活动元素，以便该行保留在 link 被单击的任何位置。目前，第一个锚标记是活动元素，因此它总是动画回到那个。我想我需要以某种方式具有清除当前活动元素然后将活动 class 应用于新活动元素的点击功能，但不完全确定。

我将提供下面的代码，但您可以在现场查看实际问题 Here

这里是代码如下

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header id="header">
        <div class="container">
            <nav id="example-one">
                <ul>
                    <li><a class="nav" href="#home">Welcome</a></li>
                    <li  class="current_page_item"><a class="nav" href="#featuredWork">Work</a></li>
                    <li><a class="nav" href="#caseStudy">Case Study</a></li>
                    <li><a class="nav" href="#about">About</a></li>
                    <li><a class="nav" href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>

CSS:

#magic-line { 
    position: absolute;
    bottom: 10px; 
    /*left: 0; 
    width: 100px; */
    height: 3px;
    background: #fe4902;
}

JQuery:

//Magic line

$(function() {


    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */

    $("#example-one").append("<li id='magic-line'></li>");


    /* Cache it */
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#example-one 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

我不是很肯定，但我想这就是你想要的？

我认为你只需要删除

function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });

这导致滑块立即滑回原来的位置。或者您只希望该滑块在单击时保持不变？

JQuery Navigation Items（锚标签）下的线条动画

JQuery Line animation under Navigation Items (anchor tag)

html

css

anchor

jquery