0

我有一个隐藏的扩展表单，单击按钮时会显示该表单。新形式的动画效果很好。但与其说是扩展表单下方的内容，不如说是部分跳转到新位置。

怎样才能让下面的内容一路顺利搬迁？当我再次隐藏表单时，通过单击取消按钮，它在更改表单按钮的动画结束时显示闪烁，这是怎么回事？

演示在这里：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>
4

0 回答 0