JQuery.animate () causes erratic input

Question

I use the jQuery .animate() function to animate the width of the <div> when the child <input> focused. However, this causes the input to jump up and down when the event fires. Something seems to be 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 several small things that cause this effect.

Working jsfiddle

1) On the submit button there is margin-top: 65px; , not the rest of the elements. This is the first reason you experience the effect of jumping up when a button falls below other elements.

2) As @smarx mentioned, jQuery adds overflow: hidden; to your element, while it animates as having certain overflow-x or overflow-y , can cause animation problems. This is jQuery's way of ensuring that the animation remains smooth (in this case ironic), and this is the second reason you experience it. You can force an overflow on your container so that this does not happen with the !important tag.