JQuery Stop Animation queue (multiple click)

Issue

I'm creating a sample static slider which have 20% div left and right (space to display a part of the next or prev slide ) and 60% in center that contain the main slide;

so , the slider must be somthing like

|20%|60% main slide|20%| : I have to keep those percentage fixed.

When clicking once , everthing works fine ,otherwise when I click on one of those divs more then one simultanious click the main slider should only move 60% (right or left ) but it triggers more then one call so the main slide move randomly !

How to prevent multiple click function call till the annimation is being finished.

Snippet :

$(document).ready(function(){
	
	$("#slide-right").on( "click", function(event){
		event.stopImmediatePropagation
		slide('right');
	});
	
	$("#slide-left").on( "click", function(event){
		event.stopImmediatePropagation
		slide('left');
	});
});

function slide(direction){
	
	var slider_width = $("#slide_container").width();
	$( ".slide" ).each(function( index ) {
		var elmnt_left = $(this).position().left;
		//alert(this.id)
		
		var val = 100 * elmnt_left / slider_width;
		var percentage = 0;
		
		// direction slide to left
		if(direction == 'left'){
			if(index == 0) {
				if(val > -100)
					percentage = val - 60;
			}			
			else if(index == 1) {
				if(val > -40)
					percentage = val - 60;
			}				
			else if(index == 2){
				if(val > 20)
					percentage = val - 60;
			}
		}else if (direction == 'right'){ // direction slide to right
			if(index == 0) {
				if(val < 20 )
					percentage = val + 60;
			}			
			else if(index == 1) {
				if(val < 80)
					percentage = val + 60;
			}				
			else if(index == 2){
				if(val < 140)
					percentage = val + 60;
			}
		}	
		
		console.log()
		
		if(percentage !== 0){	
			$( this ).animate({
				left: percentage+'%'
			}, 400, function() {
				// Animation complete.
				
			});
		}
		
	});
};

html,body {
	width:100%;
	height:100%;
	margin:0px;
}

.main{
	width:100%;
}

#slide_container{
	position:relative;
	width:100%;
	height:300px;
	overflow:hidden;
	text-align:center;
}

#slide_container .slide {
	position:absolute;
	width: 60%;
	border:0px solid #ccc;
	height:100%;
	display:inline-block;
	margin:0;
	opacity:0.7;
}

#slide_container .slide1 {
	background-color:green;
	left:20%;
}

#slide_container .slide2 {
	background-color:gray;
	left:80%;
	
}

#slide_container .slide3 {
	background-color:pink;
	left:140%;
	
}


#slide_container  #slide-left {
	display:inline-block;
	height: 100%;
	width: 20%;
	left:0;
	position:absolute;
	z-index:100;
}

#slide_container  #slide-right {
	display:inline-block;
	height: 100%;
	width: 20%;
	right:0;
	position:absolute;
	z-index:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<div class="main">
		<div id="slide_container">
			<span id="slide-left"></span>
			<span id="slide-right"></span>
			<div>
				<div class="slide slide1" id="1" ></div>
				<div class="slide slide2" id="2" ></div>
				<div class="slide slide3" id="3" ></div>
			</div>
		</div>
	</div>

Solution

How to prevent multiple click function call till the annimation is being finished?

Pseudo code:

$("#next").on("click", function(){
   if( $("#slider").is(":animated") ) return;
   // animation logic here
});

Answered By - Roko C. Buljan