I am currently utilizing jQuery's .animate() feature to create a smooth animation effect on the width of a <div> element when a child <input> is in focus. Nevertheless, I'm encountering an issue where the input field jumps up and down when the event triggers, which seems to be related to the use of 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);
}
});