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;