jquery - 如何在鼠标悬停后隐藏搜索栏时实现 jQuery 延迟？ (购物)

Question

我在一家零售店使用 Shopify，将鼠标悬停在搜索图标上时，搜索栏非常敏感。正如您在 gif 中看到的，当将鼠标从搜索图标向下移动到搜索栏时，搜索栏会很快消失。

搜索栏 gif - http://recordit.co/YvsZYDLaH8

当鼠标向下移动到搜索栏时，如何让搜索栏不那么快消失？下面是我为搜索表单找到的 jQuery:悬停效果。

  jQuery('#search-top').hover(
  function () {
    jQuery(this).addClass('active').find('.search-form').stop().delay(2).show()();
  },
  function () {
    jQuery(this).removeClass('active').find('.search-form').stop().delay(2).hide();
  }
);

如有任何帮助，我们将不胜感激!

Answer 1

2 毫秒的延迟时间太短，您可以将其增加到 2 秒(2000 毫秒)。尝试几个值，看看您更喜欢哪个值:

jQuery('#search-top').hover(
  function () {
    jQuery(this).addClass('active').find('.search-form').stop().delay(800).show();
  },
  function () {
    jQuery(this).removeClass('active').find('.search-form').stop().delay(2000).hide();
  }
);

评论中的两个建议都很好，所以你可以使用 fadeIn() 和 fadeOut() 函数来添加一点动画来代替延迟搜索框的显示和隐藏。

注意:在 show() 之后有一对额外的括号。我在回答中删除了它们。