javascript - How can I fade in text-decoration css with jquery? - Stack Overflow

admin管理员组

文章数量:1295267

I have the following code:

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

When a user hovers over sentence, I would like an underline to fade in under the word.

This seems like such a simple problem, but I have not been able to figure out how best to do it. Just to be clear, I cannot just use css:hover. I need to do this with JQuery given the actual problem is more plicated and requires more control than that illustrated here. Thanks very much for your help in advance.

I have the following code:

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

When a user hovers over sentence, I would like an underline to fade in under the word.

This seems like such a simple problem, but I have not been able to figure out how best to do it. Just to be clear, I cannot just use css:hover. I need to do this with JQuery given the actual problem is more plicated and requires more control than that illustrated here. Thanks very much for your help in advance.

• javascript
• jquery
• html
• css

Share Follow edited Dec 8, 2012 at 7:09 Shiridish 4,96255 gold badges3636 silver badges6464 bronze badges asked Dec 8, 2012 at 6:59 AndrewAndrew 3,9991515 gold badges5252 silver badges6565 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This might not fit your needs, and I realize you specifically don't want to use CSS. But just in case...

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;
}​

Script

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

http://jsfiddle/as42u/4/

How about the Animated Underlines with jQuery plugin?

1. Use the underline jQuery plugin as Cymen suggested

Don't forget to add the required CSS to your stylesheet

2. Do it yourself

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

Example fiddle. You have to use a bottom border because jQuery doesn't know how to animate the text-decoration property.

本文标签： javascriptHow can I fade in textdecoration css with jqueryStack Overflow