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在mouseenter上对菜单项fadeIn进行下划线？还是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过渡*。然后使用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;

怎样用Jquery制作下划线fadeIn？（背景图片？）

3 个答案:

怎样用Jquery制作下划线fadeIn？ （背景图片？）

3 个答案:

怎样用Jquery制作下划线fadeIn？（背景图片？）