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

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

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

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

1.html

 

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()加一个调用条件就好了

你可能感兴趣的:(jQuery)