How does one make jQuery animate-show a hidden element smoothly?
<p>I've noticed that when I try to animate an element which is originally hidden into view there's no animation - the element just appears immediately.</p>

<p>Try the following code, for example:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
      span {white-space: nowrap; display: none}
    &lt;/style&gt;
    &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;
    &lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      function hide() {
        $("span").animate({width: "hide"}, 2000);
      }
      function show() {
        $("span").animate({width: "show"}, 2000);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;span&gt;This is a span.&lt;/span&gt;
    &lt;button onclick="hide()"&gt;hide&lt;/button&gt;
    &lt;button onclick="show()"&gt;show&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The <code>span</code> element is hidden at first, because of the CSS. <code>show()</code>-ing it makes it simply appear, immediately, even though I'm asking for a 2-second animation. (<code>hide()</code>-ing it works smoothly.)</p>

<p>How can I make it <code>show()</code> smoothly too?</p>

<p>While at it, I've noticed another issue as well: while the animation is taking place the vertical location of the elements changes a little (if you look closely you'll see the buttons a little lower and the span a little higher during the animation). Why is that, and how can it be prevented?</p>

<p>By the way I'm using <code>width</code> in this example, but the same happens for <code>height</code>. I'm using Firefox 4.</p>

<p>Edit: having read the answers given so far I would like to emphasise that the problem is only when the element is originally hidden by the CSS - otherwise the above code works perfectly fine. Also, I'm not interested in all kinds of other animations (like jQuery's own <code>show()</code> or an <code>opacity</code> animation) - I want my own animation (like <code>width</code> in my example).</p>
