jQuery .animate() causing jumpy input

Question

I am using jQuery's .animate() function to animate the width of a <div> when a child <input> is focused. However, this is causing the input to jump up and down when the event is fired. It seems to be something with 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

There are a few small things working against you here that are causing this effect.

Working JSFiddle

1) There is a margin-top: 65px; on your submit button and not the rest of your elements. This is the first reason you are experiencing the up-down jumping effect when the button drops below the other elements.

2) As mentioned by @smarx, jQuery is adding overflow: hidden; to your element while it animates as having a defined overflow-x or overflow-y can cause issues with the animations. This is jQuery's way of ensuring the animation remains smooth (ironic in this case) and is the second reason you are experiencing this. You can force an overflow on its container to ensure this does not happen with an !important tag.