Javascript 如何使用jquery淡入文本装饰css？

我有以下代码：

This is a <span id="sentence">sentence</span>.

这是一个句子。

当用户将鼠标悬停在

句子

上时，我希望在单词下面有一条下划线

---

这似乎是一个如此简单的问题，但我一直无法找到最好的解决方法。为了清楚起见，我不能只使用

css:hover

。我需要使用JQuery来实现这一点，因为实际问题比这里说明的更复杂，需要更多的控制。非常感谢您的帮助。

插件如何？

这可能不适合您的需要，我知道您特别不想使用CSS。但以防万一

HTML 剧本 1。按照Cymen的建议使用

别忘了在样式表中添加

2。自己动手做

$("#sentence").hover(function(){
    $(this).animate({
        borderBottomWidth: "1px"
    }, 500);
});

---

例如。您必须使用底部边框，因为jQuery不知道如何设置文本装饰属性的动画。

感谢您的响应，但尝试了，但不幸失败。这里有一个js提琴（只是在加载时淡入淡出，而不是悬停）说明什么应该工作，但没有。还有其他想法吗？这肯定会起作用——很令人沮丧，但我真的希望我犯了一个愚蠢的错误，这很容易解决。人力资源管理。。。你的小提琴看起来应该能用。我认为这个插件已经很旧了。如果你能在CSS中做到这一点（见其他答案），我会倾向于这一点，因为它更标准（尽管可能没有向后兼容）。@Andrew好消息——你只是错过了样式。你的小提琴很有风格：谢谢你的回复。不幸的是，我确实需要使用jquery，但非常感谢它的贡献。@Andrew你为什么“需要”使用jquery？一个很好的理由是它需要在不支持的浏览器中工作（看起来IE是罪魁祸首）。我+1你认为，如果它符合需要，只使用CSS当然更好。除了IE兼容性问题，因为悬停效应应该只在某些情况下发生，而不是一直发生。鉴于此，我需要能够根据一组参数控制何时发生悬停。感谢您的澄清。然后让jQuery添加一个具有新样式的类-请参阅我的更新答案。

span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    border-bottom: 1px solid transparent;
}

span.clicked {
    border-bottom: 1px solid black;
}​

$('span').click(function(){
  $(this).addClass('clicked');
});

$("#sentence").hover(function(){
    $(this).animate({
        borderBottomWidth: "1px"
    }, 500);
});