jquery - jquery animate がすべてのコンテンツをアニメーション化していない

Question

これは私のhtmlです

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

ここに私のjsがあります

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

画像がアニメーション化されません。突然、視界に飛び込んできます。アニメーション化するコンテンツを含む記事全体を取得するにはどうすればよいですか?