jquery - フォーム送信中のアニメーションのバグ

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");

フォームの投稿では、標準の Enter キーが正常に機能することに注意してください。私は、人々がその画像を自然に使用することを想像するだけです (デザイナーの希望通り)。

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

-->

どんな助けでも大歓迎です:)