Question

我试图做点什么。如果点击一个添加 #add-conferance，则菜单会显示.add-contact。点击隐藏然后显示隐藏。我也让setTimeout 7秒，但是我希望这个setTimeout会在我的鼠标放在外面.add-contact时触发，这意味着当鼠标不在该菜单上时，几秒后菜单将隐藏。

 $('#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

如果您希望它不隐藏，如果用户将鼠标移到块外，然后在7000ms通过之前再将其指向那里，则需要添加超时处理程序并使用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

onclick div hide，setTimeout div hide

1 个答案: