ループ内のJqueryアニメーション関数が一緒に実行されていません

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

各アニメーション機能（lipAnimate、eyeAnimateなど）は、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); 
} 

あなただけの代わりに4つのほぼ同じ機能を作成するためのパラメータを受け入れた一つの関数を作った場合、それが良いだろう。

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