jQuery 动画不会在一个元素上运行

Question

我有以下 jQuery 代码，当我单击选择框中的选项时运行：

$('#name, #account, #kid')
    .attr('disabled', 'disabled')
    .css('background-color', '#ffffcc')
    .animate({ backgroundColor:'#ffffff' }, 1000);

此代码采用三个输入字段#name、#account 和#kid，禁用它们，更改背景颜色，然后将背景颜色淡化为白色。我正在使用允许我淡化颜色的 jQuery Color 插件。

问题是，当一个站点刚刚加载时，我正在更改选择的选定选项，它会禁用所有三个字段，更改背景颜色，但第一个元素 #name 不会褪色背景-颜色为白色。只有以下两个。

但是，如果我再次尝试更改选择框选项，它每次都能完美运行！所以问题只在页面重新加载后第一次出现。有没有其他人有过同样的经历？

这是整个 jQuery：

$('#receiver').change(function(){

    var selected = $(this).children('option:selected').val();

    if (selected == 'new')
    {
        $('#name, #account, #kid').val('').attr('disabled', '');
    }
    else
    {
        $.getJSON("<?php echo site_url('ajax/get_receivers') ?>",
        function(data){
            $.each(data, function(i, data){
                if (data.id == selected)
                {
                    $('#name').val(data.name);
                    $('#account').val(data.account);
                    $('#kid').val(data.kid);

                    $('#name, #account, #kid')
                        .attr('disabled', 'disabled')
                        .css('background-color', '#ffffcc')
                        .animate({ backgroundColor:'#ffffff' }, 1000);
                }
            });
        });
    }

});

#receiver 是选择框。

Answer 1

带有 ajax/json 请求的 WFM

http://jsbin.com/egani --> 使用 jQuery UI

http://jsbin.com/ekura/ --> 使用旧的 jQuery 颜色插件（2 年以上）