​

var $el, leftPos, newWidth,

    $mainNav = $("#example-one"),

    $mainNav2 = $("#example-two");

​

/*

    EXAMPLE ONE

*/

$mainNav.append("<li id='magic-line'></li>");

​

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

    });    

});

​

​

/*

    EXAMPLE TWO

*/

$mainNav2.append("<li id='magic-line-two'></li>");

​

var $magicLineTwo = $("#magic-line-two");

​

$magicLineTwo

    .width($(".current_page_item_two").width())

    .height($mainNav2.height())

    .css("left", $(".current_page_item_two a").position().left)

    .data("origLeft", $(".current_page_item_two a").position().left)

    .data("origWidth", $magicLineTwo.width())

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

​

$("#example-two li").find("a").hover(function() {

    $el = $(this);

    leftPos = $el.position().left;

    newWidth = $el.parent().width();

    $magicLineTwo.stop().animate({

        left: leftPos,

        width: newWidth,

        backgroundColor: $el.attr("rel")

    })

}, function() {

    $magicLineTwo.stop().animate({

        left: $magicLineTwo.data("origLeft"),

        width: $magicLineTwo.data("origWidth"),

        backgroundColor: $magicLineTwo.data("origColor")

    });    

});

});