JQuery FadeIn / FadeOut цикл проблема - PullRequest
Новая
       12

JQuery FadeIn / FadeOut цикл проблема

0 голосов
/ 15 марта 2010

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

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>

Спасибо!

1 Ответ

1 голос
/ 15 марта 2010

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

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

...