延迟 jquery if 条件动画

Question

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

我在 Whosebug 片段中的代码：

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

延迟 jquery if 条件动画

Delay in jquery animate with if condition

html

javascript

css

jquery

slider