I'm trying to show a small loading image during a slow operation with jQuery and can't get it right. It's a BIG table with thousands of rows. When I check the "mostrarArticulosDeReferencia" checkbox it removes the "hidden" class from these rows. This operation takes a couple of seconds and I want to give some feedback. "loading" is a div with a small animated gif

Here's the full code

jQuery(document).ready(function() {
jQuery("#mostrarArticulosDeReferencia").click(function(event){
	if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
		jQuery("#loading").show(); //not showing
		jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
		jQuery("#loading").hide();
	} else {
		jQuery("#loading").show();  //not showing
		jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
		jQuery("#loading").hide();
	}
});
jQuery("#loading").hide();
});

It looks like jquery is "optimizing" those 3 lines

		jQuery("#loading").show(); //not showing
		jQuery("#listadoArticulos tr.r").removeClass("hidden");
		jQuery("#loading").hide();

And never shows the loading div. Any Ideas?

Bonus: There is a faster way of doing this show/hide thing? Found out that toggle is WAY slower.

UPDATE: I tried this

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
	if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
			jQuery("#loading").show(); //not showing
			jQuery("#listadoArticulos tr.r").removeClass("hidden"); //slow operation
			setTimeout("jQuery('#loading').hide()", 1000);
	} else {
			jQuery("#loading").show();  //not showing
			jQuery("#listadoArticulos tr.r").addClass("hidden");  //slow operation
			setTimeout("jQuery('#loading').hide()", 1000);
	}
});

That's what I get

1. click on checkbox
2. nothing happens during 2/3 secs (processing)
3. page gets updated
4. loading div shows up during a split second

UPDATE 2: I've got a working solution. But WHY I have to use setTimeout to make it work is beyond me...

    jQuery("#mostrarArticulosDeReferencia").click(function(event){
	if( jQuery("#mostrarArticulosDeReferencia").attr("checked") ) {
			jQuery("#loading").show();
			setTimeout("jQuery('#listadoArticulos tr.r').removeClass('hidden');", 1);
			setTimeout("jQuery('#loading').hide()", 1);
	} else {
			jQuery("#loading").show();
			setTimeout("jQuery('#listadoArticulos tr.r').addClass('hidden');", 1);
			setTimeout("jQuery('#loading').hide()", 1);
	}
});