Предистория : есть 2 обработчика события - на клик и на потерю (blur) фокуса формой . Реакцией на данные события должен быть поочерёдный показ/скрытие (slideToggle) элементов страницы .
Проблема : если установить фокус на форму , а затем инициировать событие onclick , то условие
$(dom_element).is(':animated')
при всех последующих вызовах будет возвращать true .
var header_components = $('.header-internals .header-component');
var header_search = $(header_components[1]).find('input[type="search"]');
var do_scroll = function(elements) {
var result = $.Deferred();
if( $(elements).is(':animated') === true ) {
/* Проблемный участок кода : */
return result.reject('Анимация ещё не завершилась !');
}
$(elements).slideToggle(600,function(){
result.resolve( $(elements).find(':visible') );
});
return result;
};
$('#search-toggle').on('click',function(e) {
do_scroll(header_components)
.done(function(visible_element) {
/* В разаработке ... */
})
.reject(function(err_msg){
alert(err_msg);
});
e.preventDefault();
});
$(header_search).on('blur',function(e) {
do_scroll(header_components);
});
Фрагмент разметки , с которой производятся все эти манипуляции :
<div class="container header-internals">
<div class="header-component">
<a href="#" class="site-logo">
<img src="assets/img/header_logo.png" alt="site logo">
</a>
<h1>Just another <span class="underline_accent">Minimalist</span> blog</h1>
</div><!-- 1-й анимируемый блок -->
<div class="header-component header-search">
<form method="get" action="" role="search">
<input type="search" placeholder="Type keyword(s) + Enter" maxlength="30" spellcheck="false" autocomplete="off">
</form>
</div><!-- 2-й анимируемый блок -->
</div><!-- /.header-internals -->