Анимация Ошибки во время отправки формы

Question

У меня есть анимированная панель поиска, которая работает по методе фокуса:

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

Однако если нажать на значок поиска, он изменяет анимацию (изменяет ширину от 320px, к меньшему ширину 200 пикселей) в поле ввода поиска, а не отправку, а затем отправку. Это поиск-значок класса изображения:

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

У меня есть CSS3 анимацию на «#search .generic» (поле ввода), который отлично работает и скользит нормально.

Есть ли средство, чтобы остановить анимацию, когда я нажимаю или наводил значок изображения поиска? Чтобы отправить форму? Единственные JS У меня есть только форма является заполнитель набор:

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

Я хотел бы отметить, что стандарт ввод ключей отлично работает для формы поста. Я просто приглашаю людей естественно использовать изображение (согласно пожеланиям дизайнера).

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

->

Любая помощь будет очень приветствуется :)

Answer 1

Этот код останавливает анимацию на зависший над вашим Отправить btn!