IE/Webkit Select animation bug

Dynamically change second select element;'s options and animate text color upon changing the first select. In IE/Webkit, second select is unusable until animation finishes.

HTML

<select class="one">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<select class="two">
    <option>a</option>
    <option>b</option>
    <option>c</option>
    <option>d</option>
    <option>e</option>
</select>

CSS

select {width:100px; padding:5px; font-size:16px; display:block;}

JavaScript

$.fn.colorText = function(opts) {
    var fadeData = $.extend({
        start: "#fff79f",
        end: "#000",
        time: 2000
    }, opts || {});
    $(this).css({
        color: fadeData.start
    }).animate({
        color: fadeData.end
    }, fadeData.time);
    return this;
};

$(".one").change(function() {
    var str = '<option>f</option><option>g</option><option>h</option><option>i</option><option>j</option>';
    $(".two").html(str).colorText({
        start: "#f00"
    });
});