如何動畫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")