jquery - 如何使用 Jquery 使下划线淡入？ (背景图像？)

Question

我有一个菜单。使用 jQuery，我设法在 .mouseenter 上为菜单项添加下划线。这是我的 fiddle :

$(document).ready(function(){
    $('a').mouseenter(function(){
        $(this).addClass('script');
   });

    $('a').mouseleave(function(){
        $(this).removeClass('script');
    });
});

HTML:

<div class="nav-wrap">
<ul id="menu">
    <li><a href="#" class="drop">Home</a>
    <li><a href="#" class="drop">Not Home</a>
    <li><a href="#" class="drop">Far Away</a>
    <li><a href="#" class="drop">My Son</a>
</ul>
</div>

http://jsfiddle.net/MSdzp/

我正在使用背景图片，因为我喜欢下划线是红色的。但我希望它淡入淡出，而不是仅仅出现在 .mouseenter 上。如果我使用持续时间，它只会等待一段时间才出现。

是否可以使用 jQuery 在 mouseenter 上使菜单项的下划线淡入？还是 jQueryUI？

我在网上搜索了很多，但还没有找到解决办法。第一次在这里发帖。

Answer 1

根本不需要图片! http://jsbin.com/atiyew/1/edit

#menu li a {
    color: #EAEAEA;
    /*display:block;*/
    display:inline; /* added */
    text-decoration:none;
    border-bottom:3px solid transparent; /* added */
    -webkit-transition: 0.6s; /* added */
            transition: 0.6s; /* added */
}
#menu li:hover a { /* added */
    border-bottom:3px solid red; 
}