Question

我有一个问题，我的一个元素是我动画，它在动画期间略微向上移动。当动画正在播放时它向上移动大约2-3个像素然后在它完成时快速向下捕捉。

有问题的元素是一个搜索字段，它的工作方式类似于stackoverflow在此页面上的内容（在标题栏中单击此页面并单击搜索字段）。当用户点击字段时，字段的宽度会增加。我的那个跳起来了。

我已经用我的确切代码创建了一个小提琴，但是我无法让它在那里运行，代码是正确的我只是觉得我不正确地使用小提琴来加载jQuery 。

就是这样：https://jsfiddle.net/vanillasnake21/4gLdaxqr/

HTML以供参考布局：

<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>

编辑：好吧我认为jfiddle无法正常工作，因为我使用的是jqueryui switchClass，我认为不支持。我现在就改写它。

编辑2：用.removeClass.addClass重写switchClass之后，问题消失了，显然该函数会为转换添加一些额外的效果。

Answer 1

我通过删除我正在使用的switchClass方法（jQuery UI的一部分）来修复问题，而是切换到常规的.removeClass（＆＃34; class）.addClass（＆＃34; class）实现和抖动走了。

元素在动画循环期间向上移动

1 个答案: