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