jquery animate is not animating all content
<p>This is my html </p>

<pre><code>&lt;article itemscope itemtype="http://schema.org/Service" class="service" id="service-{entry_id}" style="display: none;"&gt;
&lt;div id="wrap1"&gt;
    &lt;div class="inner"&gt;
        &lt;!-- image in here --&gt;
        &lt;h1 itemprop="name"&gt;{title}&lt;/h1&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="wrap2"&gt;
    &lt;div class="inner"&gt;
        &lt;p itemprop="description"&gt;{description}&lt;/p&gt;
        &lt;a class="enquire-button" href="mailto:http://www.test.com?subject={title}"&gt;enquire about this product&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>and here is my js</p>

<pre><code> $('#' + id).animate({
            height: 'toggle'
        },
        duration,
        function() {
        }
    ); // end animate
</code></pre>

<p>I am not getting the image animating. All of a sudden it just jumps into view. How can I get the whole article including content to animate?</p>
