JQuery Stop Animation queue (multiple click)

Question

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>

Answer 1

You can also add a class in the container when the animation starts and remove the class when the animation ends.So this class is only present while the animation is taking place.

When slide function executes you can check if that class is present, and if it is, return false.

 $(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){

if($("#slide_container").hasClass("animating")) {
return false;
}else{
$("#slide_container").addClass("animating");
}

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.
             $("#slide_container").removeClass("animating");
        });
    }

   });
};

Answer 2

if(percentage !== 0 && !window.animating)
{   
        $( this ).animate({
            left: percentage+'%'
        }, {
             start: function(){
                window.animating = true;
             },
             complete: function(){
                window.animating = false;
             }
         });
    }

Adding a var in something "global" like window could do the trick in my opinion.

Answer 3

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
});