如何使用jQuery实现文本装饰CSS的淡入效果？

Question

I have the following code:

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

当用户将鼠标悬停在sentence上方时，我希望单词下方出现一个淡入的下划线。

这似乎是一个非常简单的问题，但我一直没有找到最好的解决方法。需要明确的是，我不能只使用css:hover。由于实际问题更复杂，需要比此处所示的更多的控制，因此我需要使用JQuery来完成此操作。非常感谢您提前的帮助。

- Andrew

Answer 1

这可能不符合你的需求，我知道你不想使用CSS。但以防万一...

HTML

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

CSS

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');
});

http://jsfiddle.net/as42u/4/

- Chris Herbert

---

感谢您的回复。不幸的是，我确实需要使用jQuery来完成它，但非常感谢您的贡献。 - Andrew

@Andrew 为什么你“需要”用jQuery来做这件事呢？ - Ian

一个很好的原因是它需要在不支持CSS转换（看起来像IE是最大的罪犯）的浏览器中工作。尽管只使用CSS当然更好，如果它符合需求，我还是给你加一票。 - Cymen

除了IE兼容性问题之外，因为悬停效果只应在特定情况下发生，而不是始终发生。鉴于此，我需要能够根据一组参数控制悬停发生的时间。感谢您的澄清。 - Andrew

看起来另一个答案会起作用。它不需要转换支持。 - Chris Herbert

Answer 2

这个jQuery动画下划线插件怎么样？

- Cymen

---

谢谢您的回复，但不幸尝试失败了。这是一个 JS Fiddle（只是在加载时淡出而不是悬停），应该有效，但实际上并没有。http://jsfiddle.net/as42u/ 有其他想法吗？这肯定应该有效 - 真让人沮丧，但我真的希望只是我犯了一个愚蠢的错误，可以轻松修复。 - Andrew

嗯...你的小提琴看起来应该能够工作。但是我认为插件已经过时了。如果你可以用CSS实现（请参见其他答案），我会倾向于这样做，因为它更标准化（尽管可能不太向后兼容）。 - Cymen

@Andrew 好消息——你只是缺少样式。你的fiddle已经可以使用样式了：http://jsfiddle.net/as42u/3/ - Cymen

Answer 3

1. 按照Cymen的建议使用下划线jQuery插件。

请不要忘记将所需的CSS添加到您的样式表中。

2. 自己动手做。

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

例子 fiddle。你必须使用下边框，因为jQuery不知道如何动画化text-decoration属性。

- Enrico