当我们需要播放多个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()加一个调用条件就好了