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

这里有一些针对你的小事会导致这种影响。

Working JSFiddle

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

2）正如@smarx所提到的，jQuery正在为您的元素添加overflow: hidden;，同时它会动画为具有已定义的overflow-x或overflow-y可能会导致动画出现问题。这是jQuery确保动画保持平滑（在这种情况下具有讽刺意味）的方式，也是您体验这一点的第二个原因。您可以在其容器上强制溢出，以确保!important标记不会发生这种情况。