JQuery 停止任何其他事件和函数，直到此事件结束

Question

所以在我的网站上，我有一个圆圈。当您将鼠标悬停在圆圈上时，它会变大并占据整个页面并成为一个菜单。这是通过 jQuery:

完成的

$(".fullScreenMenu").hover(function(){
   $('.fullScreenMenuText').fadeOut();
   $(".fullScreenMenu").css("transform", "scale(20)", "top", "-30vh", "left","-30vw", "transition-duration", "2s"); 
   $("#menuTest").fadeIn();
});

这很好用。但是，我不希望它在用户离开悬停时关闭。相反，我在导航菜单上弹出了一个 'x'。

$(".fullScreenMenu").hover(function(){
   $('.fullScreenMenuText').fadeOut();
   $(".fullScreenMenu").css("transform", "scale(20)", "top", "-30vh", "left","-30vw", "transition-duration", "2s"); 
   $("#menuTest").fadeIn();
});
$('#closeBtn').click(function(){ 
      $(".fullScreenMenu").css("transform", "scale(1)", "top", "80vh", "left","-2vw", "transition-duration", ".5s"); 
    $("#menuTest").fadeOut();   
     function showCircleText(){
        $('.fullScreenMenuText').show(); 
      }
    setTimeout(showCircleText, 500);
    });

   .close {
     position: fixed;
     top: 5vh;
     text-align: right;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FULL SCREEN MENU -->
    <div class="fullScreenMenu">
    <div class="fullScreenMenuText">Full Screen Menu</div>
    </div>

    <div class="row" id="menuTest">
     <div class="text-center col-12 mt-5">
  <div class="display-2 text-center" style="z-index: 200">This is a Menu Test</div>
  <h1 style="z-index: 200">This is a Menu Test</h1>
 </div>
 
 <div class="close col-12">
  <h1><i class="fas fa-times" id="closeBtn"></i></h1>
 </div> 
</div>

这也很好用...有时。如果在单击 'x' 后完全移动鼠标，它会重新触发 $(".fullScreenMenu").hover(function(){...}; 函数。基本上，我只想做的是阻止任何其他 JQuery 在完成关闭动画所需的 1 秒内工作。

我试过了event.stopImmediatePropagation()；和 event.stopPropagation();但这些都不起作用（根据他们的描述，我认为它们无论如何都不起作用）。

想法？

Answer 1

您需要设置一个标志，例如 canAnimate，当关闭按钮被点击并且在该标志为真时不打开或在悬停时执行任何操作。

    var canAnimate = true;
    $(".fullScreenMenu").hover(function(){
       if(canAnimate){   
          $('.fullScreenMenuText').fadeOut();
          $(".fullScreenMenu").css("transform", "scale(20)", "top", "-30vh", "left","-30vw", "transition-duration", "2s"); 
          $("#menuTest").fadeIn();
       }
    });

    function showCircleText(){
       $('.fullScreenMenuText').show(); 
       canAnimate = true;
    }

    $('#closeBtn').click(function(){ 
       canAnimate = false;
       $(".fullScreenMenu").css("transform", "scale(1)", "top", "80vh", "left","-2vw", "transition-duration", ".5s");

       $("#menuTest").fadeOut();
       setTimeout(showCircleText, 500);
    });

JQuery 停止任何其他事件和函数，直到此事件结束

JQuery Stop any other events and functions until this event finishes

html

css

jquery

jquery-animate