title: jQuery show "loading" during slow operation
body: <p>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</p>
  
  <p>Here's the full code</p>
  
  <pre><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();
  });
  </code></pre>
  
  <p>It looks like jquery is "optimizing" those 3 lines</p>
  
  <pre><code>        jQuery("#loading").show(); //not showing
          jQuery("#listadoArticulos tr.r").removeClass("hidden");
          jQuery("#loading").hide();
  </code></pre>
  
  <p>And never shows the loading div.
  Any Ideas?</p>
  
  <p>Bonus: There is a faster way of doing this show/hide thing? Found out that toggle is WAY slower.</p>
  
  <p>UPDATE:
  I tried this</p>
  
  <pre><code>    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);
      }
  });
  </code></pre>
  
  <p>That's what I get</p>
  
  <ol>
  <li>click on checkbox</li>
  <li>nothing happens during 2/3 secs (processing)</li>
  <li>page gets updated</li>
  <li>loading div shows up during a split second</li>
  </ol>
  
  <p>UPDATE 2:
  I've got a working solution. But WHY I have to use setTimeout to make it work is beyond me...</p>
  
  <pre><code>    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);
      }
  });
  </code></pre>
  
  <p>UPDATE 3:
  Just found a better solution for this particular case. </p>
  
  <pre><code>//mostrar u ocultar articulos de referencia
  $("#mostrarArticulosDeReferencia").click(function(event){
      if( $("#mostrarArticulosDeReferencia").attr("checked") )
          $("tr.r").css({'display':'table-row'});
      else
          $("tr.r").css({'display':'none'});
  });
  </code></pre>
  
  <p>Using .css({'display':'none'}) turns out to be WAY faster than hide(), so no need for the loading animation...<br>
  This article showed me the light: <a href="http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance" rel="noreferrer">show/hide performance</a>.</p>