下面是整个动画功能。
我在这个小动画。 它基本上是下面这些代码3行(其绘制一个三角形)。 我只是想下面执行3次。
$('.conn-1').width('100%').animate({'height':'100%'},line_anim, function () {
$('.conn-2').height('100%').animate({'width':'100%'}, line_anim, function () {
$('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim,
全JS动画功能如下:我加入了“ // comments
的地方我最近尝试”。 基本上试图来包装循环的3倍左右,这些线路的变量,如果你看看对你会看到底部完整的代码的功能。 不知道,如果它坏了,因为语法由于有多少功能都参与/嵌套。
function enterprise() {
$('.medical-center .icon-1').addClass('caro-anim');
//caro_icon();
$('.conn').height(0).width(0);
setTimeout(function(){
medical_array.length = 0;
uni_array.length = 0;
children_array.length = 0;
var scale_time =3000;
$('.replay').hide();
$('.medical-text').addClass('scale-anim');
$('.medical-center').addClass('scale-anim').animate({margin: '-26% 0px -34%'}, scale_time,
function(){$(this).hide().show()}).siblings('.ferris').delay(scale_time/2).animate({opacity:1},scale_time/2,
function(){/* $('.connect-lines').animate({opacity:1},scale_time/2); */
setTimeout(function(){
pushArray(medical_array, '.medical-center');
pushArrysa(uni_array,'.university-hospital');
pushArray(children_array,'.childrens-hospital');
var padding = $('.conn-1').css('padding');
var line_anim = 700;
$('.replay').hide();
function animAll(remainingLoops){ // recent attempt
if(!remainingLoops) return; // recent attempt
$('.conn-1').width('100%').animate({'height':'100%'},line_anim,
function () {
$('.conn-2').height('100%').animate({'width':'100%'}, line_anim,
function () {
$('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim,
function(){replay();
animAll(remainingLoops-1); // recent attempt
}); // recent attempt
}); // recent attempt
});
}
animAll(3); // recent attempt
);
}
);
//$('.conn-2').width(0).siblings('.connect-lines').css('margin',0);
}, 2000);
});
},5000);
}
最近尝试独立的下面。但是我觉得嵌套函数或立即量可以导致语法问题的,完整的代码在上述范围内。
function animAll(remainingLoops){ // recent attempt
if(!remainingLoops) return; // recent attempt
$('.conn-1').width('100%').animate({'height':'100%'},line_anim,
function () {
$('.conn-2').height('100%').animate({'width':'100%'}, line_anim,
function () {
$('.conn-3').css({width:'100%'}).animate({'height':'100%'}, line_anim,
function(){replay();
animAll(remainingLoops-1); // recent attempt
}); // recent attempt
}); // recent attempt
});
}
animAll(3); // recent attempt