CODEWITHSUNDEEP
jqueryhtmlcssjquery-animate
HumanHickory
HumanHickory

Reputation: 504

JQuery Stop any other events and functions until this event finishes

So on my website, I have a circle. When you hover over the circle, it grows and takes over the whole page and becomes a menu. This is done with jQuery:

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

This works just fine. However, I don't want it to close when the user moves off hover. Instead, I have an 'x' that pops up on the nav menu. 

$(".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>

This also works fine...sometimes. If you move the mouse AT ALL after you've clicked the 'x' it re-triggers the $(".fullScreenMenu").hover(function(){...}; function. Basically, all I want to do is prevent any other JQuery from working for the 1 second it takes to do the closing animation.

I tried event.stopImmediatePropagation(); and event.stopPropagation(); but neither of those worked (based on their descriptions, I didn't think they'd work anyway).

Thoughts?

Upvotes: 0

Views: 26

Answers (1)

Nawed Khan
Nawed Khan

Reputation: 4391

You need to set a flag, like canAnimate, when the close button is clicked and not open or do anything on hover while the flag is 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);
    });

Upvotes: 1

Related Questions