Why does my jQuery animation require an extra click in IE8 to finish?

Question

I am pretty new to jQuery in general, however the following code works perfectly in Chrome and Firefox, but not in IE8. In IE8, I have to click anywhere on the page to start the animation after selecting a radio button. Here is the code:

$("input[name=method]").change(function() {
    if($("input:radio[name=method]:checked").val() == 'installer') {    
        $('#download').slideUp(0).removeClass("vendorSize").text("Download").addClass("installerSize").slideDown(500);      
    }
    else if($("input:radio[name=method]:checked").val() == 'url') {
        $('#download').slideUp(0).removeClass("installerSize").text("Download From Vendor Website").addClass("vendorSize").slideDown(500);
    }
});

Anyone know why this breaks in IE8 but not in the other browsers? If you feel this would work better using .animate (not that I think it should matter), can you provide an example of how to code it?

Thanks,

Eric R

Answer 1

Are the inputs showing? In IE, any radio or checkbox inputs that are not showing (i.e. that have display="none") will not throw normal click or change events.

Answer 2

In IE the change event isn't fired directly when you click the radio button, so you have to click somewhere else before it is fired. You can try using the click event instead of the change event, that should work.

Answer 3

Some events do not propogate in IE the same as in other browsers. jQuery 1.4 is better than previous versions in this regard. I have had to put .change() in some of my code to propogate change events such as this - force the .change event using the

myselector.trigger('change'); /* we made changes so trigger it */