@erelizor

JQuery: Почему анимация работает не правильно?

Предистория : есть 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 -->
  • Вопрос задан
  • 160 просмотров
Пригласить эксперта
Ответы на вопрос 1
Nordborn
@Nordborn
Frontend
Попробуйте вот так
$(header_search).on('blur',function(e) {
    do_scroll(header_components);    
    $('#search-toggle').off('click');       
});


я могу ошибаться в синтаксисе, если так не работает, почитайте про .off
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы