jQuery在.show下面制作动画内容

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>