如何才能使一个下划线淡入与Jquery?(背景图片吗?)

Question

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

$(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淡入?还是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; 
}

Answer 2

我将使用边框底部代替图像，并使用css过渡将其淡入。css看起来像这样:

#menu li a {
    color: #EAEAEA;
    display:block;
    text-decoration:none;
    border-bottom: 3px solid rgba(255, 0, 0, 0);
    transition: border-color .5s;
}
#menu li:hover a {
    color:#FFF;
    border-color: rgba(255, 0, 0, 1);
    // transition: border-color .5s; // edit: not required, credits to @RokoC.Buljan
}

我也更新了你的小提琴:http://jsfiddle.net/Pevara/MSdzp/1/

Answer 3

最好的解决方案是有一个具有下划线样式的css类，并在将要加下划线的元素上启用css transitions*。然后使用jQuery toggleClass()来添加/删除这个下划线类。你不需要使用图像，它会加载得更快。这是启用所有转换的简单方法，但是最好只使用需要转换的规则。

-webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;