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

Question

我有以下代码：

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

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

这似乎是一个如此简单的问题，但我一直无法弄清楚如何最好地做到这一点。为了清楚起见，我不能只使用css:hover. 我需要使用 JQuery 来执行此操作，因为实际问题比此处说明的更复杂并且需要更多控制。非常感谢您提前提供的帮助。

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/

Answer 2

带有 jQ​​uery插件的动画下划线怎么样？

Answer 3

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

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

2.自己做

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

示例小提琴。您必须使用底部边框，因为 jQuery 不知道如何为 text-decoration 属性设置动画。