javascript - add a loop function around 3 small animations within larger animation functions -
below entire animation function.
i have smaller animation within this. these 3 lines of code below (which draws triangle). want below execute 3 times.
$('.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, full js animation function below: have added '// comments' of recent attempt is. trying wrap function loops 3 times variable around these lines, if @ full code toward bottom you'll see. not sure if it's broken because of syntax due how many functions involved / nested.
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); } recent attempt stand alone below.. think nested functions or immediate amount of may resulting in syntax issue, within full code above.
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
nesting shouldn't cause errors if done right. it's hard read code, i'm going guess related way code not formatted because there weird places timeout times not settimeout. also, in animation, sets width: 100%, etc. never set initial value. jquery animate doesn't reset variables why seems running once, unless replay() resetting it... why asking replay() code, can't figure out shown problem is....
function enterprise() { $('.medical-center .icon-1').addclass('caro-anim'); $('.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 () { settimeout(function () { pusharray(medical_array, '.medical-center'); pusharray(uni_array, '.university-hospital'); pusharray(children_array, '.childrens-hospital'); var padding = $('.conn-1').css('padding'); var line_anim = 700; $('.replay').hide(); animall(3); function animall(remainingloops) { if (!remainingloops) return; $('.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(); //reset .conn-* classes here //call animall again animall(remainingloops - 1); }); }); }); } }, 2000); }); }, 5000); }; is should after proper formatting
Comments
Post a Comment