表单提交期间的动画错误

Question

我有一个动画搜索栏，它适用于焦点方法：

$("#search .generic").focus(function () {
    $(this).css("width","320px");
}).focusout(function () {
    $(this).css("width","200px");
});

但是，如果我单击搜索图标，它会更改搜索输入框上的动画（将宽度从 320 像素更改为较小的 200 像素），而不是先提交，然后再提交。这是搜索图标图像类：

$("#search .search-btn").stop();

我在“#search .generic”（输入框）上有一个 CSS3 动画，它可以正常工作并且可以滑动。

当我单击或悬停搜索图标图像时，是否可以停止动画？让表单提交？我唯一只有表单的其他 JS 是占位符集：

$('#search .generic').attr("placeholder", "SEARCH ME");

我会注意到标准输入键适用于表单发布。我只是想象人们自然地使用图像（根据设计师的意愿）。

--> HTML 代码（更新后）：

<aside id="search">
  <form id="searchform" method="GET" action="/search/">
    <input class="search-btn" type="submit" value="">
    <input class="generic" type="text" name="searchform" placeholder="SEARCH ME">
  </form>
</aside>

-->

欢迎任何帮助:)

Answer 1

此代码在将鼠标悬停在您的提交 btn 上时停止动画！

$('#search .search-btn').hover(function() {
     $('#search .generic').stop(true, true);
     return true;
});