jquery 延迟切换搜索栏

Question

我是编码新手，我试图让我的搜索栏在悬停在按钮上时切换。我希望它延迟切换。以下是我到目前为止的想法：

$( document ).ready(function() {
    console.log( "ready!" );
    $("#search-form").hover(
      function(){
          $("#search-input").delay(700).toggleClass("collapse");
      }
  )
});

这里是 HTML:

<form id="search-form" style="display:flex-end;" class="form-inline my-2 my-lg-0">
          <button class="btn btn-search" type="submit" data-toggle="collapse">
          </button>
          <input id="search-input" class="collapse form-control" type="text" placeholder="Search..." name="search">
        </form>

所以切换有效，但它似乎只是忽略了延迟。我哪里做错了？不确定是否相关，但我使用的是 bootstrap 4.5。
感谢您的帮助！

Answer 1

来自 jQuery API 文档：

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases. (https://api.jquery.com/delay/)

它没有完整的文档记录（据我所知），但是 toggleClass() 不是使用内置效果队列的函数。

最简单的解决方案是使用原版 window.setTimeout() 函数：

$( document ).ready(function() {
    console.log("ready!");
    $("#search-form").hover(function() {
      window.setTimeout(function() {
          $("#search-input").toggleClass("collapse");
      }, 700)
    });
});

PS：上述解决方案虽然在技术上可行，但当您使用鼠标指针快速移动 on/off 表单时，它不会像您期望的那样工作。请参阅下面的模拟：

$( document ).ready(function() {
    console.log("ready!");
    $("#search-form").hover(function() {
      window.setTimeout(function() {
          $("#search-input").toggleClass("collapse");
      }, 700)
    });
});

/* Border - just to highlight the form */
#search-form {
  border: 2px solid red;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="search-form" style="display:flex-end;" class="form-inline my-2 my-lg-0">
          <button class="btn btn-search" type="submit" data-toggle="collapse">BUTTON
          </button>
          <input id="search-input" class="collapse form-control" type="text" placeholder="Search..." name="search">
        </form>

相反，您可能希望选择仅 CSS 的解决方案，它会自动避免上述不当行为（使用 transition CSS 属性及其 delay 选项):

// No JavaScript needed :)

/* Border - just to highlight the form */
#search-form {
  border: 2px solid red;
}

#search-form #search-input {
  visibility: hidden;
  transition: visibility 0s linear 0.7s;
}
#search-form:hover #search-input {
  visibility: visible;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form id="search-form" style="display:flex-end;" class="form-inline my-2 my-lg-0">
          <button class="btn btn-search" type="submit" data-toggle="collapse">BUTTON
          </button>
          <input id="search-input" class="form-control" type="text" placeholder="Search..." name="search"><!-- NOTE: no `collapse` class here anymore -->
        </form>

Answer 2

延迟仅适用于 jQuery 效果队列，因此非常适合像这样的幻灯片和淡入淡出。所以还有另一种方法可以增加延迟：

使用setTimeout函数：

$(document).ready(function () {
    console.log("ready!");
    $("#search-form").hover(
        function () {
            setTimeout(function () {
                $("#search-input").toggleClass("collapse");
            }, 700);
    });
});

或

你可以使用jQueryUI

$("#search-input").toggleClass("collapse",800);

见Toggle Class with delay

jquery 延迟切换搜索栏

jquery delay toggle searchbar

javascript

jquery

delay

toggle