jQuery：专注于输入会阻止动画的完成

Question

为什么＆＃39;警告（＆＃39;动画尚未完成！＆＃39;）＆＃39;输入获得焦点后每次触发？

＆＃13;

＆＃13;

var slidable_blocks = $('.header-internals .slidable');
var header_search = $(slidable_blocks[1]).find('input[type="search"]');
var scroll_content = function(target_node) {

  if ($(target_node).is(':animated') === true) {
    alert('animation not finished yet !');
    return false;
  }
  if (typeof $(target_node).data('scrollDirection') === 'undefined') return false;

  var margin_amount = ($(target_node).data('scrollDirection') == 'up') ? $(target_node).parent().height() * -1 : 0;
  $(target_node).animate({
    marginTop: `${margin_amount}px`
  }, 'slow', '', function() {

    var direction = ($(this).data('scrollDirection') == 'up') ? 'down' : 'up';
    $(this).data('scrollDirection', direction);
    if (direction == 'down') $(header_search).focus();

  });
};

$('#search-toggle').on('click', function(e) {
  scroll_content(slidable_blocks[0]);
  e.preventDefault();
});

＆＃13;

<div class="container header-internals">
  <div class="slidable" data-scroll-direction="up">
    <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>
  <div class="slidable header-search">
    <form method="get" action="" role="search">
      <input type="search" placeholder="Type keyword(s) + Enter" maxlength="30" spellcheck="false" autocomplete="off">
    </form>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;