Easy way to fade the background color of a div with jQuery?

When a field is modified I want to highlight the background color of the <div> for that row. Then slowly fade it back to normal. So I use jQuery and jQuery UI's color animation effect:

$('.example_row')
    .css('backgroundColor', '#ff7f0')
    .animate({backgroundColor: '#d4d4d4'}, 5000)
    .html(modifiedContent);

The problem is the overall background is not #d4d4d4, it's a gradient. So ideally I would just change the background opacity from 1 to 0 for the <div> for that row. How do I do this? I tried 开发者_JAVA技巧jQuery UI's removeClass effect:

$('.example_row')
    .addClass('modified')
    .removeClass('modified', 5000)
    .html(modifiedContent);

.modified just has the 1 css rule of background-color: #ff7f00. The problem here is that removing the class means the background fades to solid white until the class if fully removed, then suddenly it changes to the true background gradient. Looks bad...

So I know that I could simply inject a new <div> with a 100% width and height within the <div> for that row and do a simple .animate({opacity: 0}). But I don't want to do that for other reasons... is there a simple solution here that doesn't require injecting an extra background <div>?

UPDATE: I created an example of my situation on jsfiddle for a clearer explanation.

A highlight effect already exist in UI,

$('input').focus(function(){
$(this).parent().effect("highlight", {},  1000);
})

Check working example at http://jsfiddle.net/9YWWw/1/