Come sappiamo jQuery ci consente di gestire dinamicamenti i cambiamenti delle regole CSS.
La variazione di una proprietà può avvenire tramite il metodo .css() oppure tramite il metodo .animate()

Un semplice esempio di utilizzo di .css è il seguente:

$("p").mouseover(function () {
    $(this).css("color","red");
 });

Tele codice cambia il colore del testo di un paragrafo in rosso al passaggio del mouse sul paragrafo stesso.

Un esempio del metodo .animate() è:

$('#button').click(function() {
  $('#book').animate({
    left: '50px',
  }, 5000);
});

Questo codice produrra al click dell’elemento con id = “button”, l’animazione dell’elemento con id = “book”. Tale animazione durerà 5000 millisecondi.
Per animazione si intende la varizione di una proprietà CSS non in maniera immediata, ma una variazione “animata” cioè che passa attraverso stati intermedi.

Tutto questo per dire che l’animazione del cambio di sfondo sul background-color non è attualmente supportata da jQuery.
Questo perchè jQuery (ma guarda un po’) riesce a gestire solo animazioni di proprietà che hanno valori numerici, come possono essere height, o left.