0

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

$("#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>

-->

任何帮助都会受到欢迎:)

4

1 回答 1

0

此代码停止动画悬停在您的提交 btn！

$('#search .search-btn').hover(function() {
     $('#search .generic').stop(true, true);
     return true;
});
于 2013-08-22T08:38:49.610 回答