jQuery change background only

[williamrouse]

I have been working on this for a while and I guess a while longer. The question is how to isolate just the background of a DIV and get it to change color or fade in opacity.

Here is simplified version where I have a DIV with some text. I want to change the background color in a continuous loop while the text remains visible. Below is the code that I wrote, but everything fades not just the background. How can I correct this?

 

//continual fade
function lowerLeftFadeIn() {
$('#lowerLeft').fadeOut(10000).css('background-color' , '#ffff99'), lowerLeftFadeOut();
}
function lowerLeftFadeOut() {
$('#lowerLeft').fadeIn(10000).css('background-color' , '#ffff99'), lowerLeftFadeIn();
}
$(document).ready(function(){
lowerLeftFadeIn();
});

[falkencreative]

Take a look at this: http://stackoverflow.com/questions/808790/jquery-fade-background-on-hover

[williamrouse]

Ouch! and Thanks!

[williamrouse]

After using the color plugin with this code it worked.

// continual pulse fade  
function lowerLeftFadeIn() {
   $('#lowerLeft').animate({
       backgroundColor: '#ffff99'
   }, 'slow'), lowerLeftFadeOut();
}
function lowerLeftFadeOut() {
   $('#lowerLeft').animate({
       backgroundColor: '#99ffff'
   }, 'slow'), lowerLeftFadeIn();
}

$(document).ready(function(){
   lowerLeftFadeIn();
});

[monkeysaurus]

The color plugin will work of course, but you can also use jQuery UI to animate background colours.