Question

我试图让每个句子在不同时间滑动。现在他们都在同一时间向上滑动。我希望第一个句子向上滑动，然后可能0.1s之后，第二个句子向上滑动，依此类推。这是我的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)

在不同的时间移动Y轴上的div

2 个答案: