在不同的時間在Y軸上移動div

我試圖讓每個句子在不同的時間向上滑動。現在他們都在同一時間滑了起來。我想讓第一句話向上滑動，然後在第二句話後面滑動，等等。這是我的JavaScript。我試圖用JavaScript做到這一點，沒有額外的CSS。在不同的時間在Y軸上移動div

<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

來源

2017-10-05 brewpixels

您是否嘗試過使用CSS3過渡延遲特性？ https://www.w3schools.com/cssref/css3_pr_transition-delay.asp你可以給每個不同的延遲 – Bhumika107

兩個問題。一個是你一次對所有「句子」元素應用變換。二是你是「句子」類沒有延遲屬性。你可以嘗試應用「轉換時間函數：緩解;」到它。 – Nuspeed1

既然你使用jQuery，您可以通過元素和工作使用延時循環：

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

來源

2017-10-05 04:54:11 spaark

如何讓動畫每5秒播放一次？我希望函數每5秒運行一次，循環播放動畫。我添加了setinterval（moveSentences，5000）;我的代碼，但它仍然只播放一次。 – brewpixels

不用設置css屬性'transform'，你可以使用'jQuery.animate'來每次減少y。這是你最初的目標嗎？ – spaark

是的，因爲我想讓div在y軸上繼續向上移動 – brewpixels

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)

來源

2017-10-05 05:52:27

在不同的時間在Y軸上移動div

回答

相關問題