Использование SetTimeOut для затухания списка черепицы элементов друг от друга

Question

Предположим, что у меня есть список элементов, чередующихся друг с другом, используя z-index. Например:

<div id="lyrics"> 
    <div class="lyric" style="z-index: 1000" val="2000">This is the first sentence</div> 
    <div class="lyric" style="z-index: 100" val="2000">Second sentence is here</div> 
    <div class="lyric" style="z-index: 10" val="0">And the third one</div> 
</div> 

Теперь я хочу, чтобы сделать эту анимацию, в которой с помощью JQuery, чтобы сделать первый лирический исчезают (Непрозрачность идет к 0) в 2000 мс, а затем следующий, и так далее, пока ничего не осталось.

Проблема в том, что с этим кодом ниже кажется, что все лирические элементы исчезают сразу.

function sto(varx, delay) { 
    setTimeout(function() { 
     varx.fadeOut("fast"); 
    }, delay); 
} 

$(".lyric").each(function(){ 
    var delay = $(this).attr("val"); 
    sto($(this), 2000); 
}); 

Answer 1

Вы устанавливаете для них все начальные затухания за 2 секунды, поэтому все они идут сразу. Чтобы сделать один шаг за другим, вам нужно либо установить дополнительные таймауты, где каждый из них настроен на время после предыдущего, либо сделать так, чтобы следующая анимация начиналась, когда первый завершался и так далее.

Вот способ с накапливая таймеры, где вы установили атрибут val каждого элемента на соответствующую накопленной задержки для каждого элемента:

$(".lyric").each(function(){ 
    var item = $(this); 
    item.delay(item.attr("val")).fadeOut("fast"); 
}); 

Вот способ использования функции завершения в цепи их одну за другой где вы установите атрибут задержки val прежде, чем исчезнуть этот пункт (не кумулятивный задержки):

(function() { 
    var items = $(".lyric"); 
    var index = 0; 

    function next() { 
     if (index < items.length) { 
      var item = items.eq(index++); 
      item.delay(item.attr("val")).fadeOut("fast", next); 
     } 
    } 
    next(); 
})(); 

в обоих примерах, обратите внимание, вы можете использовать .delay() все анимации JQuery, а не установите свой собственный setTimeout().

Также обратите внимание, что вы должны использовать data-val="2000", а затем .data("val"), чтобы прочитать его как совместимый с HTML5.

Answer 2

Вы не передаете значения задержки. Попробуйте это:

HTML:

<div id="lyrics"> 
    <div class="lyric" style="z-index: 1000" val="2000">This is the first sentence</div> 
    <div class="lyric" style="z-index: 100" val="1000">Second sentence is here</div> 
    <div class="lyric" style="z-index: 10" val="500">And the third one</div> 
</div> 

Javascript:

function sto(varx, delay) { 
    setTimeout(function() { 
     varx.fadeOut("fast"); 
    }, delay); 
} 

$(".lyric").each(function(){ 
    var delay = $(this).attr("val"); 
    sto($(this), delay); 
}); 

Я изменил значения, так что вы можете увидеть анимацию Вот рабочий jsfiddle link