如何动画jQuery的MagicLine导航不同的底部边框颜色

Question

我想为我的网站制作菜单动画。我想使用jQuery MagicLine导航。看看magicline演示：http://css-tricks.com/examples/MagicLine

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

任何人都可以帮助我吗？

Answer 1

有需要做一些修改。 HTML/CSS/jQuery

转到您的HTML flle并更新<li> s中的所有标签<ul id="example-one">。这些标签应该具有属性“rel”，并且此属性具有底部边框颜色的值。像演示2（你可能会看到它是如何在HTML文件中）。

添加“rel”属性后。

<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> 

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

CSS

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

在您的jQuery的文件，请更新此代码：

$magicLine 
     .width($(".current_page_item").width()) 
     .css("left", $(".current_page_item a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $magicLine.width()) 
    // add below code 
    .data("origColor", $(".current_page_item a").attr("rel")); 

$("#example-one li").find("a").hover(function() { 
     $el = $(this); 
     leftPos = $el.position().left; 
     newWidth = $el.parent().width(); 

     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth, 

     // add below code 
     backgroundColor: $el.attr("rel")   
     }); 
    }, function() { 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth"), 

      // add below code 
      backgroundColor: $magicLine.data("origColor") 

     });  
    }); 

    $(".current_page_item a").mouseenter(); 

Answer 2

你必须在每个a标签，这将是边框颜色rel属性：

<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> 

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

所以，你得到的$magicLine的OrigWidth后，你需要

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

在您需要获取rel属性为你徘徊在该项目上的价值悬停功能。

 backgroundColor: $el.attr("rel") 

然后在鼠标移开时，需要设置边框回到原来的颜色

 backgroundColor : $magicLine.data("origColor")