Question

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

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

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

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

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

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

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

我会注意到标准输入键对于表单帖子很好。我只是自然地使用图像来控制人（根据设计师的意愿）。

- ＆GT; HTML代码（POST UPDATE）：

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

- ＆GT;

任何帮助都会受到欢迎：）

Answer 1

此代码会在您的提交btn上方停留动画！

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

表单提交期间的动画Bug

1 个答案: