jquery - 非表示/表示をアニメーション化するときのリスト要素のジャンプの Div

Question

リスト要素の中に div があります。親リスト要素をクリックするたびに、divを非表示/表示しています。機能は動作していますが、アニメーションの最後でアニメーションがジャンプしています。内部のdivが非表示/表示されるたびに高さを変更する親リスト要素に関係していると思います。どう対処すればいいのか分からないようです。CSSの問題だと思いますか？

JSFIDDLE へのリンク

HTML:

<li id='band'>
  <h3>BAND</h3>
    <div class='content'>
        <p>Lorem ipsum.</p>
   </div>
</li>

CSS

#centerpage ul {
  padding: 0;
  list-style: none;
  text-align: center;
}

#centerpage ul li p {
  margin: 0;
}

.content {
    background-color: green;
    width: 100%;
    overflow: hidden;
}

JQUERY/JAVASCRIPT

$(function() {
    var $el = $('#links ul li');

    $el.each(function() {
        var $content = $(this).children().filter('.content');
        var height = $content.height();
        $content.hide().css({ height: 0});
        var listheight = $(this).height();
        console.log(listheight);

        $(this).click(function() {

            var $content = $(this).children().filter('.content');
            if ( $content.is(':visible') ) {
                $content.animate( {
                    height: 0
                }, 1000, function() {   
                    $content.hide();

                });
            }

            else {
                $content.show().animate({ height: height }, { duration: 1000} );
            }

        })  

    })

})