Question

I have a routine that dynamically changes a select list’s “selected” 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');

    });

Answer 1

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