jquery - .showの下のjQueryアニメーションコンテンツ

Question

ボタンをクリックすると表示される非表示の拡張フォームがあります。新しいフォームのアニメーションはうまく機能しています。ただし、部分的に新しい場所にジャンプする拡張フォームの下のコンテンツはそれほど多くありません。

以下のコンテンツをスムーズに移動するにはどうすればよいですか? また、キャンセル ボタンをクリックしてフォームを非表示にすると、フォーム変更ボタンのアニメーションの最後にちらつきが表示されます。

デモはこちら: http://jsfiddle.net/mNRem/6/

これはjQueryコードです：

var duration = 400;
var formHidden = true;
$('.hidden-form').hide();
$('.change-form-button').click(function() {
  formHidden = !formHidden;
    if (formHidden) {
      $('#extend-button').hide(duration);
      $('.hidden-form').show(duration);
    } else {
      $('#extend-button').show(duration);
      $('.hidden-form').hide(duration);
    }
  return false;
});

そして、これはhtmlです：

  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        Some content before form...
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <form>
          <table>
            <tr>
              <td><div class="hidden-form">New name</div></td>
              <td><input id="name" type="text" class>&nbsp;</td>
              <td><div id="extend-button" class="change-form-button btn btn-primary">Change form</div></td>
            </tr>
              <tr>
              <td><div class="hidden-form">Address</div></td>
              <td><div class="hidden-form"><input id="address" type="text" class>&nbsp;</div></td>
              <td></td>
            </tr>
            <tr>
              <td></td>
              <td>
                <div id="save-button" class="hidden-form btn btn-primary">Save</div>
                <div class="change-form-button hidden-form btn btn-primary">Cancel</div>
              </td>
              <td></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        Some content after form...
      </div>
    </div>
  </div>