如何向我的 .hide 函数添加超时函数？

Question

当您将鼠标悬停在购物车上时，它将显示下面的 2 个容器。如果您在容器可见后将其悬停在容器上，我还将其设置为保持容器显示。

我需要从鼠标退出购物车图标到进入容器的延迟。因此，当您将鼠标悬停在容器上时，它们仍然可见。

这是我的代码：

$(document).ready(function() {
    $('#carticoncontainer, #userinfocontainer, #containerpoint').hover(function() { 
        setTimeout("#userinfocontainer, #containerpoint", 2000); 
        if ($("#userinfocontainer, #containerpoint").is(":hidden") == true) {
            $("#userinfocontainer, #containerpoint").show();
        } else {
            $("#userinfocontainer, #containerpoint").hide();
        }        
    });    
});

Answer 1

您可以使用如下所示的计时器。

当鼠标离开元素时，我们可以启动一个计时器来隐藏元素，但是如果鼠标在计时器用完之前回到这些元素之一，我们将取消计时器，这样元素就不会被隐藏

$(function() {
  var timer;
  $('#carticoncontainer, #userinfocontainer, #containerpoint').hover(function(e) {
    clearTimeout(timer);
    $("#userinfocontainer, #containerpoint").show();
  }, function() {
    timer = setTimeout(function() {
      $("#userinfocontainer, #containerpoint").hide();
    }, 500)
  });
});

#containerpoint,
#userinfocontainer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="carticoncontainer">carticoncontainer</div>
<div id="userinfocontainer">userinfocontainer</div>
<div id="containerpoint">containerpoint</div>