jQuery fadeIn/fadeOut loop problem

Question

Я пытаюсь сделать последовательную анимацию с петлей .... но я не могу выполнить ее плавно (некоторые проблемы с задержкой).

JQuery

var i = 0; 
var b = 0; 

var fades = function(){$(".caja").stop(0).each(function(){ 
$(this).delay(i * 500).fadeIn('slow', function(){ 
    $(this).delay(5000).fadeOut('slow', function(){ 
     $(".cajar").delay(1000).each(function(){ 
     $(this).delay(b * 500).fadeIn('slow', function(){ 
      $(this).delay(5000).fadeOut('slow', fades()); 
      }); 
      b++; 
     }); 
    }); 
    }); 
i++; 
})} 


fades(); 

CSS

.caja{ 
width: 150px; 
height: 150px; 
background-color: black; 
float: left; 
margin: 0 10px 0 0; 
display: none; 
} 

.cajar{ 
width: 150px; 
height: 150px; 
background-color: red; 
float: left; 
margin: 0 10px 0 0; 
display: none; 
} 

.cajav{ 
width: 150px; 
height: 150px; 
background-color: green; 
float: left; 
margin: 0 10px 0 0; 
display: none; 
} 

HTML

<div class="caja"></div> 
<div class="caja"></div> 
<div class="caja"></div> 

<div class="cleaner"></div> 

<div class="cajar"></div> 
<div class="cajar"></div> 
<div class="cajar"></div> 

Спасибо!

Answer 1

Ну, вызовы «.each()» будут запускать все затухания (и т. Д.) В одно и то же время, а затем все эти вещи будут наступать друг на друга, когда они будут обновлять «b ». Я думаю. Такие вещи, как анимации и вызовы «задержки», сразу же возвращаются, поэтому операции выполняются в очереди (-ях) эффектов для затронутых элементов.

Возможно, вы могли бы попробовать вместо одного «b» использовать атрибут «.data()», напрямую связанный с каждым затронутым элементом.