Question

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

它在悬停时获得适当的宽度和左侧位置，但是当悬停未激活时，它似乎没有抓住正确的属性。
我不确定如何更新活动元素，以便该行与所点击的链接保持一致。目前，第一个锚标记是活动元素，因此它总是动画回来。我想我需要以某种方式有一个单击函数来清除当前活动元素，然后将活动类应用于新的活动元素，但不完全确定。

我将在下面提供以下代码，但您可以在实时网站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 Line动画（锚标记）

1 个答案: