When we need to play multiple jQuery animations, and need to play them in cycles many times, but there are functions similar to setTimeout in the cycles,

We found that functions such as for, while cannot be used.

At this time, we can encapsulate animation into a function. The details are as follows:

1.html

<div class="img-wrap jp-pc-wrap">
     <div class="opa" style="opacity: 0;"></div>
     <img src="images/01.jpg" alt="" class="img" style="display: block; opacity: 0; width:     
      0px; height: 0px; right: 0px; top: 0px; left: 0px;">
      .
      .
      .
     <div class="white">
         <img src="images/01-1.jpg" alt="" class="white00" style="opacity: 0;">
     </div>
        .
        .
        .
    <div class="tips">
         <div class="tip tip00" style="opacity: 0; top: -105px;">
             <p>Larala<br><span>La La La</span></p>
              <span class="horn"></span>
          </div>
     </div>
        .
        .
        .
</div>

2.css

Because the above class has nothing to do with the content of this article, the css that needs to be changed is written in the html style above, and the css will not be written

3.jquery

$(function a(){
    $('.img-wrap').children().eq(1).css('display','block')/*Show first picture*/
        /*Zoom in on the first picture (jq animation)*/
        $('.img-wrap').children().eq(1).animate({
            opacity:'1',
            height:'100%',
            width:'100%',
        },1000,function(){
            /*Reduce picture transparency*/
            $('.img-wrap').children().eq(0).animate({
                opacity: '0.7',
            },1000,function(){
                /*Show small pictures*/
                $('.img-wrap').children().eq(10).children().eq(0).animate({
                    opacity:'1'
                },1000,function(){
                    /*Show small text*/
                    $('.img-wrap').children().eq(18).children().eq(0).animate({
                        opacity:'1',
                        top:'42px',
                    },1000,function(){
                        /*Pause animation for 1.5 seconds before picture disappears*/
                        setTimeout(function(){
                            /*Picture disappear*/
                            $('.img-wrap').children().eq(1).css({'display':'none','width':'0px','height':'0px','opacity':'0'})
                            $('.img-wrap').children().eq(10).children().eq(0).css('opacity','0')
                            $('.img-wrap').children().eq(18).children().eq(0).css({"opacity":"0","top":"-105px"})
                            $('.img-wrap').children().eq(0).animate({
                                opacity: '0',
                            },1000,function(){
                                a()//Call the function again and play the animation again
                            })
                        },1500);
                    })
                })
            })
        })
})

In this way, you can play the animation infinitely. If you need to add times, add a call condition to a ()