I'm encountering a small issue with one of the elements I'm animating - it's moving up slightly during the animation process. It elevates about 2-3 pixels while the animation is playing, then snaps back down once it's completed.
The element in question is a search field that functions similar to the one on StackOverflow's page (at the top of the header bar, click on the search field to see it in action). When the user clicks on it, the field's width increases, but mine jumps up instead of smoothly expanding.
I've set up a fiddle with my exact code, but unfortunately, I'm having trouble getting it to run properly in there. I believe my code is correct, but I may not be using the fiddle correctly to load the jQuery.
Here's the link to the fiddle: https://jsfiddle.net/vanillasnake21/4gLdaxqr/
For reference, here's the HTML layout:
<div id="minimenu">
<a href="#"> inquire </a>
<a href="#">social</a>
<a href="#">feedback</a>
<a href="#">forum</a>
<a href="#"> customer login</a>
<div id="search" class="search_nominal">
<button id ="search_button" class="search_button_nominal"> </button>
<input id="search_field" class="search_field_nominal" type="text"placeholder="Search">
</div>
edit: It appears that the jQueryui switchClass I'm using is not supported in the jfiddle. I will rewrite it now to correct this issue.
edit 2: After replacing switchClass with .removeClass.addClass, the problem has been resolved. It seems that switchClass was adding some unwanted effects to the transitions.