JQuery 停止动画队列(多次单击)

Question

我正在创建一个示例静态 slider ，左右各有 20% div(用于显示下一张或上一张幻灯片的一部分的空间)，中心有 60% 包含主幻灯片；

所以， slider 一定是这样的

|20%|60% 主幻灯片|20%|:我必须保持这些百分比固定。

单击一次时，一切正常，否则，当我单击其中一个 div 并同时单击一次以上时，主 slider 应仅移动 60%(向右或向左)，但它会触发多次调用，因此主 slider 会移动随机!

如何在动画完成之前防止多次单击函数调用。

片段:

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

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

伪代码:

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