當其他div淡入100％時淡入div

Question

我有四個不同文字大小的div。 我想淡入4個div，但div可能只會在前一個div完全可見時淡入。

$('.MESSAGE_CONTAINER:last').hide(); 
$('.MESSAGE_CONTAINER').each(function(index) { 
     if($(this).text().length > 50){ 
      delayNumber = 2500; 
     }else{ 
      delayNumber = 800; 
     } 
     $(this).delay(delayNumber*index).fadeIn(200); 
}); 

以上是我的代碼，但我不確定如何在：nth-​​child部分中使用：visible。 我已經試過如下：

if($('.CONTAINER:nth-child(index)').is(':visible')){ 
    $(this).delay(delayNumber*index).fadeIn(200); 
} 

Answer 1

fadeIn採取這是一個回調，一旦該元件在已經褪色，將被稱爲第二個參數下面是一個例子，你如何可以利用這一點，一個輔助函數：

function fadeInNext($divs, delay, index) { 
 
    index = index || 0; 
 
    if (index < $divs.length) { 
 
    $divs.eq(index).fadeIn(delay, fadeInNext.bind(this, $divs, delay, index + 1)); 
 
    } 
 
} 
 

 
$('div').hide(); 
 

 
fadeInNext($('div'), 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>div1</div><div>div2</div><div>div3</div><div>div4</div>