jQuery change selected option's background on change of selected item

I have a routine that dynamically changes a select list's "selected开发者_StackOverflow" option when the corresponding image from a carousel widget is clicked (it's a wordpress template selector).

I'd just like to add a flash of background color, then fade to white, to give the user a visual cue that they've just changed the value of the template chooser select list.

I've attempted at it below to assign the className "mySelectedOption" to the selected option, but its not working.

I'm sure there is perhaps a better way to get the visual cue I'm looking for, (since the css change is static and wont fade back to white background)

$('#carousel ul li').click(function(e) {
    var myOption = $(this).children('img').attr('title');
    $("#myTheme option[value='"+myOption+"']").attr('selected', 'selected');
    $("#myTheme :selected]").attr('className', 'mySelectedOption');

    });

Try this instead

$("#myTheme")
    .css('backgroundColor', '#A9A9A9') //set some color
    .animate({
        backgroundColor: "#ffffff" //now fade to white 
    }, 'slow'); //instead of slow you can also specify a time in milliseconds

I recall that you need to use the jQuery color plugin to animate the backgroundColor property. But don't know if that still holds true for the new jQuery version. You will have to check that yourself.

According to Michal's answer jQuery itself still can't do it but jQuery UI can. But including jQuery UI for this purpose only is an overkill

To update Jitter's answer, the latest version of jQueryUI will allow you to animate color properties, but not jQuery itself.

[Too low rep to leave comment]

For the colour fade, take a look at the animate property. Something like this would do it:

$('#selector')
    .css(backgroundColor, '#c00')
    .animate( {backgroundColor: '#fff'}, 5000 );