backgroundColor wont change

backgroundColor wont change

hi, new to js and jquery... so please excuses my trivial posts.

$(document).ready(function(){

$(".navi").mouseover(function(){
$(this).animate({paddingLeft: "20", width: "190", backgroundColor: "#ff0000"}, "fast")
         });

$(".navi").mouseout(function(){
$(this).animate({paddingLeft: "10", width: "200"}, "fast")
         });

});


the paddingLeft and the width work fine... but the backgroundColor dont change... any ideas? thanks in advance