jQuery: Why animation is not working correctly?

Question

JavaScript

Prehistory: there are 2 event handlers - on click and on loss (blur) of focus by the form. The response to these events should be to alternately show/hide (slideToggle) page elements.
Problem: If you set the focus to the form and then fire the onclick event, then the condition

$(dom_element).is(':animated')

on all subsequent calls will return 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);           
});

A fragment of the markup with which all these manipulations are performed:

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

Answer 1

Try like this

$(header_search).on('blur',function(e) {
    do_scroll(header_components);    
    $('#search-toggle').off('click');       
});

I may be wrong in the syntax, if this does not work, read about .off