Onmouseover/out fade background color

Onmouseover/out fade background color

Hi, I am using jeditable for an edit in place text box. I am trying to get it to work like demo #1 here:

http://github.com/madrobby/scriptaculou ... laceeditor

Where when you mouseover it instantly changes color, and when you mouseout it fades out.

I downloaded the color animate plugin, and only have one problem:

If you mouseout it starts to fade, but if you mouseover again before the fade is done it will not change the color. Any tips?

Here is my code:

$("#description").editable("/requires/update_data.php?t=pages&n=<? echo $page_id; ?>",{
            indicator : "Saving...<img src='images/working.gif'>",
            tooltip   : 'Click to edit...',
            cancel    : 'Cancel',
               submit    : 'OK',
             onblur : 'submit'            
         }).bind("mouseover", function(){         
            $(this).css('background-color',"#F4F874");             
         }).bind("mouseout", function(){         
             $(this).animate({
                  backgroundColor: "#BBD9EE"
            }, 'normal' );         
          });


Thanks