Question

我试图在下面的脚本中使用for循环+ 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

每个“animate”函数（lipAnimate，eyeAnimate等）正在创建一个分配给doMove变量的函数。

问题在于doMove未使用var关键字声明，因此您将其设为全局，因此，每次新的“animate”函数调用都会覆盖它。 / p>

您需要将其设置为本地，以便它们不会被销毁。但是现在您的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 );
}

循环中的Jquery动画函数不能一起运行

1 个答案: