Problem with background color on li tag

Question

I am setting background color of an li element by the code below :

$('#li123').animate({ backgroundColor:  color}, 'slow');

It works fine but the color spans whole length of li. What do I do if I want it to span the text contained in the li only.

Answer 1

Wrap the text inside the li in a span and do the animate on the span instead. If you need top and bottom margin of the animated area you could use display: inline-block on the span.

Answer 2

Simple,

For your <li> add a <span>, enter your text in the span block and do a JQuery animate on that span. Your question isn't too clear though.