javascript - 在 if 条件下延迟 jquery animate

Question

我正在尝试制作一个包含 3 个图像和 3 个元素符号的简单 slider 。我的问题是，当我使用 jquery .animate 转到下一个元素符号时，第一次它工作正常但第二次显示我在第一个位置有延迟，这使得 jquery .animate 在其他元素符号中被延迟。我在 JSFiddle 中的代码 https://jsfiddle.net/Lqpj7sx1/

我在 StackOverflow 片段中的代码:

	$(document).ready(function(){


		//Encuentro la cantidad de imagenes
		var cantImagenes = $('#imagenes img').length;


		//Genero los bullets de acuerdo a la cantidad de imagenes
		for(var i = 0; i < cantImagenes; i++)
		{			
			$("#bullets").append("<span class='bullet' id=" + i + "></span>");
			$('#bullets #0').addClass("seleccion");
			var cantBullet = $("span.bullet").length;
		}	

		var currentBullet = 0;

		function animacion(){

			$("#texto3").slideDown(4000, function(){
				$("#texto3").css("display", "none")
				$("#texto2").slideDown(4000, function(){
					$("#texto2").css("display", "none")
					$("#texto1").slideDown(4000, function(){
						$("#texto1").css("display", "none")
						
			})})});

			for(i = 0; i < cantBullet; i++)
			{				
				$("#bullets").animate({"left": "+=600px"}, 4000, function(){									
					$("#bullets #"+currentBullet).removeClass("seleccion");					
					currentBullet = currentBullet + 1;
					$("#bullets #"+currentBullet).addClass("seleccion");
						if(currentBullet > cantBullet){	
							currentBullet = 0;
							$("#bullets #"+currentBullet).addClass("seleccion");
						}
				});	
			} 
			
			$("#foto3").animate({"left": "+=600px"}, 4000, function(){
				$("#foto2").animate({"left": "+=600px"}, 4000, function(){
					$("#foto1").animate({"left": "+=600px"}, 4000, function(){
						$("#foto3").css("left", "0")
						$("#foto2").css("left", "0")
						$("#foto1").css("left", "0")
						
						animacion();
			})})});

		}


		animacion();




	});

	#imagenes{
		width: 600px;
		height: 450px;
		border: 1px solid grey;
		position: relative;
		overflow: hidden;
		background-image: url(http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg)
	}
	#foto1, #foto2, #foto3{
		display: block;
		position: absolute;
	}
	#texto1, #texto2, #texto3{
		display: none;
		position: absolute;
		text-align: center;
		width: 600px;
		height: 30px;
		padding-top: 10px;
		vertical-align: bottom;
		background-color: #000000;
		color: #FFFFFF;
		opacity: 0.3;
		filter: alpha(opacity=30);
	}
	.bullet
	{
		width: 20px;
		height: 20px;
		border:3px solid #000;
		margin-right: 10px;
		display: inline-block;

	}
	.seleccion
	{
		background: #ccc;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h2>Slider</h2>
<div id="imagenes">
    <img src="https://www.koi-nya.net/img/subidos_posts/2016/08/PS4-Slim_08-21-16_006-600x450.jpg" id="foto1" />
    <img src="https://www.euroresidentes.com/estilo-de-vida/moda-estilo/wp-content/uploads/sites/15/2014/09/collage-leggings.jpg" id="foto2" />
    <img src="http://1u88jj3r4db2x4txp44yqfj1.wpengine.netdna-cdn.com/wp-content/uploads/2014/05/big-data-600x450.jpg" id="foto3" />
    <div id="texto1">Picture 1</div>
    <div id="texto2">Picture 2</div>
    <div id="texto3">Picture 3</div>   
</div>
<div id="bullets"></div>

我的问题具体出在这几行:

for(i = 0; i < cantBullet; i++)
            {               
                $("#bullets").animate({"left": "+=600px"}, 4000, function(){                                    
                    $("#bullets #"+currentBullet).removeClass("seleccion");                 
                    currentBullet = currentBullet + 1;
                    $("#bullets #"+currentBullet).addClass("seleccion");
                        if(currentBullet > cantBullet){ 
                            currentBullet = 0;
                            $("#bullets #"+currentBullet).addClass("seleccion");
                        }
                }); 
            } 

希望有人能帮帮我!谢谢!

Answer 1

检查这个[https://jsfiddle.net/8hoo7tc9/]实际上for循环没有正确设置

  [1]: https://jsfiddle.net/8hoo7tc9/