jquery - 菜单上的动画、平滑滚动边框底部

Question

我的目标是产生这样的效果：http ://css-tricks.com/jquery-magicline-navigation/但不是使用额外的浮动<li></li>，我想使用border-bottom属性 - 甚至可能吗？我试图做这样的事情：

$('ul#top_main_menu li a').hover(
    function () {
      $(this).addClass("active").animate(100);
    },
    function () {
      $(this).removeClass("active").animate(100);
    }
  );

哪里.active类添加到我的<a href=""></a>标签border-bottom: 2px solid #A7E108;- 任何人都知道我如何动画它以在悬停元素后平滑滚动？