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

Question

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 complicated and requires more control than that illustrated here. Thanks very much for your help in advance.

Answer 1

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.net/as42u/4/