循环中的Jquery动画函数没有一起运行

Question

我正在尝试在下面的脚本中使用 for loop+jquery 一起运行 4 个动画函数。 请帮我弄清楚如何一起运行这些动画功能。

<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 关键字声明，因此您将其设为全局，因此，它会被每个新的“动画”函数调用覆盖。

您需要将其设为本地，以免它们被破坏。但是现在您的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 );
}