Функция анимации Jquery в цикле не работает вместе

Question

Я пытаюсь запустить 4 функции анимации вместе, используя for loop + jquery в приведенном ниже сценарии. Пожалуйста, помогите мне понять, как я могу запустить эти функции анимации вместе.

<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>

Большое спасибо. Я новичок в Jquery.

Answer 1

Каждая «одушевленная» функция (lipAnimate, eyeAnimate и т. Д.) Создает функцию, которая назначается переменной doMove.

Проблема в том, что doMove не объявлено с ключевым словом var, поэтому вы делаете его глобальным, и поэтому оно перезаписывается при каждом новом вызове функции "animate".

Вам нужно сделать это локальным, чтобы они не были уничтожены. Но теперь ваш setInterval вызывает doMove, передавая строку, которая ожидает, что doMove будет глобальным. Вместо этого он должен передать прямую ссылку.

Вот исправление к одной из функций. Внесите те же исправления в другие.

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

В целом, было бы лучше, если бы вы просто создали одну функцию, которая принимала параметры, вместо создания четырех почти идентичных функций.

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