jQuery .animate()导致跳转输入

Question

我正在使用jQuery的.animate()函数来设置<div>孩子<input>聚焦时的宽度.但是,这会导致输入在触发事件时上下跳转.它似乎与之相关inline-block.

的jsfiddle

HTML

<div id="simp-inputs">
  <div>
    <label class="control-label" for="simp-date">Date: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></div>
      <input type="text" class="form-control" id="simp-date">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-start-time">Start Time: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
      <input type="text" class="form-control" id="simp-start-time">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-end-time">End Time: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
      <input type="text" class="form-control" id="simp-end-time">
    </div>
  </div>
  <div>
    <label class="control-label" for="simp-comments">Comments: </label>
    <div class="input-group">
      <div class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></div>
      <input type="text" class="form-control" id="simp-comments">
    </div>
  </div>
  <div>
    <label></label>
    <button class="btn btn-default" role="button" id="simp-submit">Submit</button>
  </div>
</div>

CSS

#simp-inputs > div {
  display: inline-block;
  width: 15vw;
  margin-right: 2em;
}

#simp-inputs > div:last-child {
  width: auto;
}

#simp-submit {
  margin-top: 65px;
}

#simp-inputs input {
  text-align: center;
}

JavaScript的

var comments = $('#simp-comments');
comments.focusin(function() {
  var div = $(this).parent().parent();
  div.animate({
      width: '30vw'
    },
    300);
});
comments.focusout(function() {
  var div = $(this).parent().parent(),
    val = $(this).val();
  if (!val.length) {
    div.animate({
        width: '15vw'
      },
      300);
  }
});

Answer 1

这里有一些对你不利的小事情导致了这种影响。

工作 JSFiddle

1）您的提交按钮上有一个margin-top: 65px;，而不是其他元素。这是当按钮下降到其他元素下方时您体验到上下跳跃效果的第一个原因。

2）正如@smarx所提到的，jQuery正在添加overflow: hidden;到您的元素，同时它具有已定义的动画overflow-x或overflow-y可能导致动画问题。这是 jQuery 确保动画保持流畅的方法（在本例中很讽刺），也是您遇到这种情况的第二个原因。您可以强制其容器溢出，以确保标记不会发生这种情况!important。