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部分。我尝试过以下方法：

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>

当其他div消失到100％时淡入div

1 个答案: