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

Animated Underlines with jQuery插件怎么样？

Answer 3

<强> 1。使用underline jQuery plugin 作为Cymen建议

不要忘记将required CSS添加到样式表

<强> 2。自己动手

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

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

如何用jquery淡入文本修饰css？

3 个答案:

HTML

CSS

脚本