jquery - jquery MagicLineナビゲーションを異なる下の境界線の色でアニメーション化する方法

Question

Web サイトのメニュー アニメーションを作成しようとしています。jQuery MagicLine Navigation を使いたいです。マジックラインのデモを見てみましょう: http://css-tricks.com/examples/MagicLine

2 つの例があります。今私は何をしたいですか？最初のデモを使用したいのですが、2番目のデモのように異なる色の下枠が必要です..

誰でもこれについて私を助けることができますか?

Answer 1

必要な変更はほとんどありません。HTML / CSS / jQuery

<li>HTML ファイルに移動し、 のすべてのa タグを更新します<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();