Как я могу fadeIn() сначала, затем fadeOut(), а затем insertAfter()?

Question

I есть простой div выцветание цикл производства. Некоторые divs находятся в внешнем div, и это находится в другом внешнем div. У меня есть сценарий, написанный, который циклизирует эти divs путем затухания и выключения. Но проблема в том, что divs выходят из строя, но вступают в фазу.

Посмотрите это fiddle и увидите этот уродливый эффект.

JS:

function tick() { 
    var $obj = $(".major_data .commitment_box .commitment"); 
    $obj.first().fadeIn().delay(1000).fadeOut(function() { 
     $obj.first().insertAfter($obj.last()); 
     tick(); 
    }); 
} 
tick(); 

Когда цикл повторяется, то эффект становится правильным. Как я могу добиться эффекта во втором цикле цикла?

Answer 1

«Но проблема в том, что divs faden out, но faden in.»

Я предполагаю, что вы пытаетесь сказать, что «дивы являются не затухать», чтобы начать с. Если вы говорите, что вы хотите, дивы, чтобы все начать спрятан так, что потом даже первый один выцветает просто измените следующую строку:

var $obj = $(".major_data .commitment_box .commitment"); 

... к этому:

var $obj = $(".major_data .commitment_box .commitment").hide(); 

Answer 2

Попробуйте это:

function tick() { 
     var $obj = $(".major_data .commitment_box .commitment").hide(); 
     $obj.first().fadeIn(1000).fadeOut(function() { 
      $obj.first().insertAfter($obj.last()); 
      tick(); 
     }); 
    } 
    tick(); 

Использование .fadeIn(1000), чтобы избежать выцветания сразу

DEMO

Или

function tick() { 
    var $obj = $(".major_data .commitment_box .commitment").hide(); 
    $obj.first().fadeIn(1000,function() { 
     $(this).fadeOut(); 
     $obj.first().insertAfter($obj.last()); 
     tick(); 
    }); 
} 
tick(); 

DEMO

Answer 3

Все, что вы .commitment дивы уже visisble, когда вы первый цикл trought их, так что нет ничего для JQuery в fadeIn. Во втором раунде они скрыты из-за предыдущего fadeOut, так что fadeIn действительно работает.

Решение должно быть изначально скрыть ваше. commitment divs. Я бы сделал это, добавив .commitment { display: none; } в ваш css.