jQuery animation won't run on one element

Question

I have the following jQuery code which runs when I'm clicking an option in a select box:

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

This code takes the three input fields #name, #account and #kid, disables them, change background-color and then fades background-color to white. I am using the jQuery Color plugin that allows me to fade colors.

The problem is, that when a site is freshly loaded, and I'm changing the select's selected option, it disables all three fields, changes background-color and, but the first element #name won't fade background-color to white. Only the two following.

But if I try to change the select box option again, it works perfectly, every time! So the problem is only occurs the first time after a page reload. Anybody else experienced the same before?

Here's the jQuery in it's whole:

$('#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 being the select box.

Answer 1

Both WFM with ajax/json request

http://jsbin.com/egani --> with jQuery UI

http://jsbin.com/ekura/ --> with old jQuery color plugin (2years+)