jquery - onclick div 隐藏，setTimeout div 隐藏

Question

我正在尝试做某事。如果单击一个添加 #add-conferance 然后菜单将显示.add-contact。当点击隐藏然后它显示隐藏。我也将 setTimeout 设置为 7sec，但我希望当我的鼠标在 .add-contact 外部时触发此 setTimeout 这意味着当鼠标不在该菜单上时，几秒钟后菜单将隐藏。

 $('#add-conferance').click(function () {
            $('.add-contact').animate({right: "0%"}, 600, 'swing');
      window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
        return false;
 });

  $('#hide-conferance').click(function () {
            $('.add-contact').animate({right: "-60%"}, 600, 'swing');

        return false;
 });

DEMO

Answer 1

您需要添加 mouseleave事件到 .add-contact 然后:

 $('#add-conferance').click(function () {
     $('.add-contact').animate({right: "0%"}, 600, 'swing');
     return false;
 });

  $('#hide-conferance').click(function () {
     $('.add-contact').animate({right: "-60%"}, 600, 'swing');
     return false;
 });

 $('.add-contact').mouseleave( function() {
     window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
 });

demo

如果您希望它在用户将鼠标移到 block 外然后在 7000 毫秒之前再次将其指向那里时不隐藏，您需要添加超时处理程序并使用 mouseenter事件:

 var hideHandler;
 $('.add-contact').mouseleave( function() {
     hideHandler = window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
 });
 $('.add-contact').mouseenter( function() {
   window.clearTimeout(hideHandler);
 });

demo