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，并且在标志为true时不打开或悬停时执行任何操作。

    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停止任何其他事件和功能，直到该事件结束

1 个答案: