时间戳

首页 > 解决方案 > JQuery 停止任何其他事件和函数，直到此事件完成

jquery - JQuery 停止任何其他事件和函数，直到此事件完成

问题描述

所以在我的网站上，我有一个圈子。当您将鼠标悬停在圆圈上时，它会增长并占据整个页面并成为一个菜单。这是用 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(); 但这些都不起作用（根据他们的描述，我认为他们无论如何都不会起作用）。

想法？

标签： jqueryhtmlcssjquery-animate

解决方案

您需要设置一个标志，如 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);
    });

推荐阅读