jquery - 悬停时如何在链接上制作水平动画边框？

Question

因此，我在这里要实现的目标是创建一个带有边框的水平导航栏，该边框仅在悬停时显示，并用鼠标滑过导航栏中的其他链接，并将鼠标移离导航栏除当前活动页面外，再次隐藏边框。我在哪里见过这个，但我不记得在哪里。它类似于这个，但没有快照。当没有悬停时，边框应该会消失。我对 jQuery 不是很有经验，所以我问任何可能有想法的人，尝试尽可能简单地解释它。我试图在这个动画上搜索几天无济于事。如果这在纯 CSS 中也是可能的，那也很好，但我不确定是不是因为它取决于光标的移动。提前感谢大家。

Answer 1

看看这个JSFIDDLE DEMO

一些 JS FUNCTION

$("#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")
        });    
    });