continuously animate with jquery

Question

i have made a text animation using jquery.

And i used "setInterval" that to starts over again for continuous animation...

but the problem is all object animate same time and repeating......

It has to be animate one by one ...

how do i fix the code? plz help me~

    <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>

the sample source on below.

please help me......

Answer 1

Wrap it in a function and recall the function once all animations are done.
You can use the promise returned by each animation with when() and then() to know when to call the function again :

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

You might want to reset the position of the elements if you're going to animate the position again.