Jquery animation function in loop not running together

Question

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.

user113716 · Accepted Answer · 2011-01-14 14:06:02Z

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

Collectives™ on Stack Overflow

Jquery animation function in loop not running together

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related