jquery動畫函數循環不能一起運行

Question

我想在下面的腳本中使用循環+ 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關鍵字聲明，因此您將它設置爲全局的，因此它將被每個新的「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); 
}