title: jQuery .show() and other transitions do not fully complete making the user think "nothing happened"
body: <p>I have had a problem for a while now where different elements on my webapp that are revealed by <code>.show()</code> do not completely show.  There are quite a few calls on different objects to <code>.show()</code> and some will complete just fine on the page. </p>
  
  <p>Here is one example of the issue: </p>
  
  <p>1) The page has a section with the ID of "<code>showMore_2</code>": </p>
  
  <pre><code>&lt;div id="showMore_2" class="showMore clear"&gt;
  </code></pre>
  
  <p>2) Now click the button to show the object and I get this:</p>
  
  <pre><code>&lt;div id="showMore_2" class="showMore clear" style="overflow: hidden; height: 1px; padding: 0px; margin: 0px; width: 1px; opacity: 0;"&gt;
  </code></pre>
  
  <p>Technically it now invisible (<code>opacity: 0</code>) and is gets stuck with a height of 1px and the user thinks "nothing happened" so they keep clicking and nothing continues to happen. The opacity does not continue to increase and the height does not continue to increase like it does when all goes well.</p>
  
  <p>I feel like I am missing a fundamental concept here, but what, I don't know.</p>