jquery - How to make a horizontally animating border on links when hovered? -

so, goal i'm trying accomplish here idea have horizontal navigation bar border shows when hovered , slides mouse on other links in navigation bar, , moving mouse away navigation bar hides border again except active page. have seen somewhere, cannot remember where. similar this, without snap. border should fade when nothing hovered. i'm not experienced jquery this, i'm asking may have ideas, try , explain simple possible. have tried searching couple days on animation no avail. if possible in pure css, great, i'm not sure because depends on movement of cursor. in advance.

have @ jsfiddle demo

some js function

$("#example-one").append("<li id='magic-line'></li>");      /* cache */     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")         });         });