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

Question

I have the following code:

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

When the user hovers over sentence , I would like to underline the layering under the word.

This seems like such a simple problem, but I could not figure out how best to do it. To be clear, I can't just use css:hover . I need to do this with jQuery, since the actual problem is more complex and requires more control than shown here. Thanks so much for your help in advance.

Answer 1

How about animated underscores with jQuery plugin ?

Answer 2

This may not suit your needs, and I understand that you specifically do not 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/

Answer 3

1. Use the underline jQuery plugin as suggested by Cymen

Remember to add the necessary CSS to the stylesheet.

2. Do it yourself

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

Fiddle example. You should use a lower bound because jQuery does not know how to animate the text-decoration property.