Question

我正在尝试为我的网站制作菜单动画。我想使用jQuery MagicLine Navigation。看一下魔术线演示：http://css-tricks.com/examples/MagicLine

有2个示例，一个是正常的底部边框，第二个是鼠标悬停时背景不同的不同颜色动画。现在我想要什么？我想使用第一个演示，但我想要不同的颜色底部边框，如第二个演示..

任何人都可以帮我吗？

Answer 1

您需要在每个rel标记上都有a属性，该属性将是边框颜色：

<ul class="group" id="example-one">
    <li class="current_page_item"><a href="#" rel="#fe4902">Home</a></li>
    <li><a rel="#fe4902" href="#">Home</a></li>
    <li><a rel="#A41322" href="#">Buy Tickets</a></li>
    <li><a rel="#C6AA01" href="#">Group Sales</a></li>
    <li><a rel="#D40229" href="#">The Show</a></li>
    <li><a rel="#98CEAA" href="#">Videos</a></li>
    <li><a rel="#1B9B93" href="#">Photos</a></li>
    <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
</ul>

然后您需要存储原始颜色值。

因此，在获得OrigWidth $magicLine后，您需要

    .data("origColor", $('.current_page_item a').attr("rel"));

在悬停功能中，您需要获取正在悬停的项目的rel属性值。

      backgroundColor: $el.attr("rel")

然后在鼠标移出时，您需要将边框设置回原始颜色

        backgroundColor : $magicLine.data("origColor")

Answer 2

需要进行少量修改。 HTML / CSS / jQuery

转到您的HTML文件并更新<li>的{{1}} s'中的所有标签。这些标签应具有属性“rel”，并且此属性具有底部边框颜色的值。就像演示2（你可能会看到它在html文件中的表现）。

添加“rel”属性后。

<ul id="example-one">

然后转到您的css文件并删除背景颜色属性。如果您没有删除此背景颜色，则会出现从“＃magic-line”背景颜色到“rel”颜色值的颜色过渡动画。根据您的要求确保将其删除。

<强> CSS

<ul class="group" id="example-one">
            <li class="current_page_item">
                <a href="#" rel="#C6AA01">Home</a>
            </li>
            <li><a rel="#fe4902" href="#">Buy Tickets</a></li>
            <li><a rel="#A41322" href="#">Group Sales</a></li>
            <li><a rel="#C6AA01" href="#">Reviews</a></li>
            <li><a rel="#900" href="#">The Show</a></li>
            <li><a rel="#D40229" href="#">Videos</a></li>
            <li><a rel="#1B9B93" href="#">Photos</a></li>
            <li><a rel="#8DC91E" href="#">Magic Shop</a></li>
</ul>

在您的jQuery文件中，请更新以下代码：

#magic-line { 
    position: absolute;
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    //background: #fe4902; - remove this.
}

如何使用不同的底部边框颜色为jquery MagicLine导航设置动画

2 个答案: