Question

我有一个例程，当点击来自轮播小部件的相应图像时，动态更改选择列表的“选定”选项（它是一个wordpress模板选择器）。

我只想添加一些背景颜色，然后淡化为白色，为用户提供一个视觉提示，他们刚刚更改了模板选择器选择列表的值。

我在下面尝试将className“mySelectedOption”分配给所选选项，但它不起作用。

我确信有一种更好的方法可以获得我正在寻找的视觉提示，（因为css更改是静态的，不会淡化回白色背景）

$('#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

试试这个

$("#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

我记得您需要使用jQuery color plugin来设置backgroundColor属性的动画。 ~~但不知道新的jQuery版本是否仍然适用。你必须自己检查一下。~~

根据Michal's answer jQuery本身仍然无法做到，但jQuery UI可以。但是为此只包含jQuery UI只是一种过度杀伤

Answer 2

要更新Jitter的答案，最新版本的jQueryUI将允许您为颜色属性设置动画，但不允许jQuery本身。

[太低的代表留下评论]

Answer 3

对于颜色淡化，请查看animate属性。像这样的东西会这样做：

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

jQuery在更改所选项目时更改所选选项的背景

3 个答案: