设有定时器的jQuery动画循环播放

当我们需要播放多个jQuery动画时，且需要循环播放多次，但是循环内又有类似setTimeout的函数时，

我们发现for，while之类的函数不能使用。

这时候我们就可以把动画封装成一个函数来实现。具体如下：

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>拉拉阿拉<br><span>啦啦啦</span></p>
              <span class="horn"></span>
          </div>
     </div>
        .
        .
        .
</div>

2.css

由于上面的class与本文内容无关，需要改动的css都写在上面html的style中了，css就不写了

3.jquery

$(function a(){
    $('.img-wrap').children().eq(1).css('display','block')/*显示第一张图片*/
        /*放大第一张图片（jq动画）*/
        $('.img-wrap').children().eq(1).animate({
            opacity:'1',
            height:'100%',
            width:'100%',
        },1000,function(){
            /*降低图片透明度*/
            $('.img-wrap').children().eq(0).animate({
                opacity: '0.7',
            },1000,function(){
                /*显示小图片*/
                $('.img-wrap').children().eq(10).children().eq(0).animate({
                    opacity:'1'
                },1000,function(){
                    /*显示小文字*/
                    $('.img-wrap').children().eq(18).children().eq(0).animate({
                        opacity:'1',
                        top:'42px',
                    },1000,function(){
                        /*图片消失之前暂停动画1.5秒*/
                        setTimeout(function(){
                            /*图片消失*/
                            $('.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()//重新调用函数，再次播放动画
                            })
                        },1500);
                    })
                })
            })
        })
})

这样就可以实现无限播放动画了，如果需要加次数，在a（）加一个调用条件就好了