Jquery animation function in loop not running together

I am trying to run 4 animation functions together using for loop+jquery in below script. Please help me figure out how do i run 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>

Thanks a lot. I am new to Jquery.

Each "animate" function (lipAnimate, eyeAnimate, etc) is creating a function that is assigned to the doMove variable.

The trouble is that doMove is not declared with the var keyword, so you're making it global, and as such, it is being overwritten by each new "animate" function call.

You would need to make it local so that they're not destroyed. But now your setInterval is calling doMove by passing a String, which expects the doMove to be global. Instead, it should pass a direct reference.

Here's the correction to one of the functions. Make the same corrections to the others.

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 );
}

Overall, it would be better if you just made one function that accepted parameters instead of creating four nearly 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 );
}