JQuery animation function in loop not working

Question

I am trying to run 4 animation functions together using the script below for the + jquery loop. Please help me figure out how to manage these animation functions together.

<script type="text/javascript"> $(document).ready(function(){ lipAnimate(); eyeAnimate(); lhsAnimate(); rhsAnimate(); function lipAnimate(){ var delaylip = 250; var repeatslip = 0; var timeslip = 4; var ilip = 1; var jlip = 0; doMove = function() { if( ilip < timeslip ){ $('#lip').removeClass('lip4'); $('#lip').removeClass('lip'+ilip); $('#lip').addClass('lip'+(ilip+1)); } else if ( ilip == timeslip ) { $('#lip').removeClass('lip4'); $('#lip').addClass('lip1'); } ++ilip; if( ilip >= timeslip ) { if (jlip < repeatslip || repeatslip == 0) { ilip = 1; jlip++; } else { clearInterval( intervallip ) ; } } } var intervallip = setInterval ( "doMove()", delaylip ); } function eyeAnimate(){ var delayeye = 250; var repeatseye = 0; var timeseye = 3; var ieye = 1; var jeye = 0; doMove = function() { if( ieye < timeseye ){ $('#eye').removeClass('eyes3'); $('#eye').removeClass('eyes'+ieye); $('#eye').addClass('eyes'+(ieye+1)); } else if ( ieye == timeseye ) { $('#eye').removeClass('eyes3'); $('#eye').addClass('eyes1'); } ++ieye; if( ieye >= timeseye ) { if (jeye < repeatseye || repeatseye == 0) { ieye = 0; } else { clearInterval( intervaleye ) ; } } } var intervaleye = setInterval ( "doMove()", delayeye ); } function lhsAnimate(){ var delaylhs = 500; var repeatslhs = 0; var timeslhs = 4; var ilhs = 1; var jlhs = 0; doMove = function() { if( ilhs < timeslhs ){ $('#lhs').removeClass('lft_hnd_4'); $('#lhs').removeClass('lft_hnd_'+ilhs); $('#lhs').addClass('lft_hnd_'+(ilhs+1)); } else if ( ilhs == timeslhs ) { $('#lhs').removeClass('lft_hnd_4'); $('#lhs').addClass('lft_hnd_1'); } ++ilhs; if( ilhs >= timeslhs ) { if (jlhs < repeatslhs || repeatslhs == 0) { ilhs = 0; } else { clearInterval( intervallhs ) ; } } } var intervallhs = setInterval ( "doMove()", delaylhs ); } function rhsAnimate(){ var delayrhs = 500; var repeatsrhs = 0; var timesrhs = 4; var irhs = 1; var jrhs = 0; doMove = function() { if( irhs < timesrhs ){ $('#rhs').removeClass('rit_hnd_4'); $('#rhs').removeClass('rit_hnd_'+irhs); $('#rhs').addClass('rit_hnd_'+(irhs+1)); } else if ( ilhs == timesrhs ) { $('#rhs').removeClass('rit_hnd_4'); $('#rhs').addClass('rit_hnd_1'); } ++irhs; if( irhs >= timesrhs ) { if (jrhs < repeatsrhs || repeatsrhs == 0) { irhs = 0; } else { clearInterval( intervalrhs ) ; } } } var intervalrhs = setInterval ( "doMove()", delayrhs ); } }); </script> 

Thank you very much. I am new to jQuery.

Answer 1

Each animate function (lipAnimate, eyeAnimate, etc.) creates a function assigned to the doMove variable.

The problem is that doMove not declared with the var keyword, so you make it global and, as such, it is overwritten with every new call to the "animate" function.

You will need to make it local so that they are not destroyed. But now your setInterval calls doMove , passing a String that expects doMove be global. Instead, it should pass a direct link.

One of the functions has been fixed here. Make the same corrections to the rest.

 function lipAnimate(){ var delaylip = 250; var repeatslip = 0; var timeslip = 4; var ilip = 1; var jlip = 0; // Make doMove local function doMove() { if( ilip < timeslip ){ // Chain jQuery functions instead of repeating DOM selection $('#lip').removeClass('lip4') .removeClass('lip'+ilip) .addClass('lip'+(ilip+1)); } else if ( ilip == timeslip ) { $('#lip').removeClass('lip4') .addClass('lip1'); } ++ilip; if( ilip >= timeslip ) { if (jlip < repeatslip || repeatslip == 0) { ilip = 1; jlip++; } else { clearInterval( intervallip ) ; } } } // pass a reference instead of a string var intervallip = setInterval ( doMove, delaylip ); } 

In general, it would be better if you only made one function that took parameters instead of creating four almost identical functions.

 animatePart(250,0,4,1,0,'#lip','lip',4); animatePart(250,0,3,1,0,'#eye','eyes',3); animatePart(500,0,4,1,0,'#lhs','lft_hnd_',4); animatePart(500,0,4,1,0,'#rhs','rit_hnd_',4); function animatePart(delay,repeats,times,i,j,sel,cls,clsNum){ function doMove() { if( i < times ){ // Chain jQuery functions instead of repeating DOM selection $( sel ).removeClass( cls + clsNum ) .removeClass( cls + i ) .addClass( cls + ( i + 1 ) ); } else if ( i == times ) { $( sel ).removeClass( cls + clsNum ) .addClass( cls + 1 ); } ++i; if( i >= times ) { if (j < repeats || repeats == 0) { i = 1; j++; } else { clearInterval( interval ) ; } } } var interval = setInterval ( doMove, delay ); }