Question

我使用jquery制作了一个文本动画。

我使用＆＃34; setInterval＆＃34;为了连续动画而重新开始...

但问题是所有对象同时生成并重复......

必须逐个制作动画......

我该如何修复代码？请帮助我〜

    <div class="textAnm2">

                    <p class="txt1">11111</p> 
                    <p class="txt2">22222</p> 
                    <p class="txt3">3333</p>

                </div>


    .textAnm2 .txt1 { position:absolute; top:340px; left:615px; font-size:13px; opacity:0; color:#142462;   }
    .textAnm2 .txt2 { position:absolute; top:230px; left:120px; font-size:13px; opacity:0; color:#142462;   }
    .textAnm2 .txt3 { position:absolute; top:280px; left:270px; font-size:13px; opacity:0; color:#142462;   }



    <script>

    setInterval( function() {

    $('.txt1').delay(500).animate({
        opacity: '1',
        top: '350px'
    }, 500, 'linear') ;

    $('.txt1').delay(2000).animate({
        opacity: '0' 
    }, 500, 'linear') ;



    $('.txt2').delay(4500).animate({
        opacity: '1'
    }, 500, 'linear') ;

    $('.txt2').delay(2000).animate({
        opacity: '0' 
    }, 500, 'linear') ;




    $('.txt3').delay(9000).animate({
        opacity: '1',
        top: '290px'
    }, 500, 'linear') ;

    $('.txt3').delay(2000).animate({
        opacity: '0' 
    }, 500, 'linear') ;

}, 1000 ); 

    </script>

下面的示例来源。

请帮助我......

Answer 1

将其包裹在一个函数中，并在完成所有动画后调用该函数您可以使用when()和then()每个动画返回的保证来知道何时再次调用该函数：

ani();

function ani() {
    $.when(
        $('.txt1').delay(500).animate({
            opacity: '1',
            top: '350px'
        }, 500, 'linear'),

        $('.txt1').delay(2000).animate({
            opacity: '0'
        }, 500, 'linear'),


        $('.txt2').delay(4500).animate({
            opacity: '1'
        }, 500, 'linear'),

        $('.txt2').delay(2000).animate({
            opacity: '0'
        }, 500, 'linear'),

        $('.txt3').delay(9000).animate({
            opacity: '1',
            top: '290px'
        }, 500, 'linear'),

        $('.txt3').delay(2000).animate({
            opacity: '0'
        }, 500, 'linear')
    ).then(ani);
}

FIDDLE

如果您要再次为该位置设置动画，则可能需要重置元素的位置。

用jquery继续动画

1 个答案: