異なる時間にY軸上でdivを移動する

Question

私は各文をスライドアップさせようとしていますが、別の時にスライドしています。今、それらはすべて同時にスライドします。私は最初の文章が上にスライドし、その後0.1sの後に2番目の文が上にスライドするようにします。ここに私のjavascriptがあります。私はjavascriptのみでこれをやろうとしており、追加のCSSはありません。

<div class="container"> 

    <div class="sentences">The first sentence</div> 

    <div class="sentences">The second sentence</div> 

    <div class="sentences">The third sentence</div> 

</div> 



function moveSentences() { 

    $('.sentences').css('transform', 'matrix(1, 0, 0, 1, 0, -20)'); 

} 

moveSentences(); 

これまで私がこれまで持っていたことの真実があります。 Fiddle

Answer 1

あなたはjQueryのを使用しているので、あなたは遅れを持つ要素と仕事をループすることができます

$('.sentences').each(function(i, item) { 
    $(this) 
     .delay(100 * i) 
     .queue(function() { 
      $(this).css('transform', 'matrix(1, 0, 0, 1, 0, -20)').dequeue(); 
     }); 
}); 

Answer 2

var i = 0; 
    var length = $('.sentences').length; 
    var x = -20; 
    function moveSentences() { 
     alert('hi'); 
     $('.sentences').eq(i).css('transform', 'matrix(1, 0, 0, 1, 0,' + x + ')') 
     x = x - 20; 
     i++; 
    } 

    var intrval= setInterval(function() { 

      moveSentences() 
      if (i >= length) { 
       clearInterval(intrval); 
      } 
     }, 1000)