첫 번째 이벤트 후 호버 애니메이션이 완전히 작동하지 않습니다.

Question

경고 : jquery/javascript 초보자가 집안에 있습니다. 나는 tutorial here을 사용하여 이미지가 호버에서 앞뒤로 흔들리는 애니메이션을 만듭니다.

그러나 첫 번째 호버 이벤트 후 첫 번째 호버 이벤트에서 앞뒤로 5 번 (스윙 변수로 정의 된 숫자) 앞뒤로 스윙하면서 이미지는 앞뒤로 한 번만 이동합니다. 모든 호버 이벤트에서 동일한 횟수로 스윙하고 싶습니다.

나는 회전, 스윙 및 스윙 카운트 변수를 변경하고 스윙 기능과 일치하는 진자 함수를 만들고, 진자 스윙에 대한 if/else 문을 변경하려고했습니다. 아무것도 작동하지 않습니다 - 내가 뭘 잘못하고 있니? 당신이 코드를 걸 으면

<script type="text/javascript"> 
(function($) { 
    $(document).ready(function() { 
     var rotation = 5; 
     var initrotation = rotation; 
     var swingtime = 603; 
     var swings = 5; 
     var swingcount = 0; 
     var startatcentre = true; 

     if (startatcentre == true) { 
      initrotation = 0; 
     } 
     $('#pendulum-child').mouseenter(function() { 
      function init() { 
       $('#pendulum-parent').animate({rotate: initrotation}, 0, function() { 
        $('#pendulum-parent').css("display", "block"); 
        rotation *= -1; 
        swingcount++; 
        pendulumswing();      
       }); 
      } 

      function pendulumswing() { 
       $('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){ 
        rotation *= -1;      
        if (swingcount >= swings) { 
         pendulumrest(); 
        } else { 
         swingcount++; 
         pendulumswing();       
        } 

       }); 
      } 

      function pendulumrest() { 
       $('#pendulum-parent').animate({rotate: 0},(swingtime/1.5), "swing");  
      } 

      init(); 
     }); 
    }); 
})(jQuery);  
</script> 

Answer 1

는, 당신은 진자 스윙은 swingcount >= swings 경우 중지 통지합니다 : 여기에 코드입니다. 즉, 처음 요소 위에 마우스를 올리면 스윙 카운트가 5를 치고 흔들림이 멈출 때까지 스윙 카운트가 계속 증가합니다.

두 번째로 요소 위에서 마우스를 움직이면 init (여기서는 진자의 위치를 ​​재설정하는 것으로 가정)의 애니메이션이 실행됩니다. 그런 다음 즉시 애니메이션을 수행하는 pendulumswing을 호출합니다. 그래서 첫 번째 스윙을 봅니다. 첫 번째 애니메이션이 끝나면 스윙 카운트를 확인합니다. 스윙 카운트는 여전히 이전 값인 6입니다. 이는 조건을 충족하지 않으며 대신 pendulumrest이 호출됩니다.

@Alex는 주석에서 언급했듯이 애니메이션을 시작하기 전에 swingcount의 값을 0으로 재설정해야합니다. 그의 의견에 생각을 구현, 같은 수 코드는 다음과 같습니다

<script type="text/javascript"> 
(function($) { 
    $(document).ready(function() { 
     var rotation = 5; 
     var initrotation = rotation; 
     var swingtime = 603; 
     var swings = 5; 
     var swingcount = 0; 
     var startatcentre = true; 

     if (startatcentre == true) { 
      initrotation = 0; 
     } 

     function init() { 
      swingcount = 0; 
      rotation = 5; 
      $('#pendulum-parent').animate({rotate: initrotation}, 0, function() { 
       $('#pendulum-parent').css("display", "block"); 
       rotation *= -1; 
       swingcount++; 
       pendulumswing();      
      }); 
     } 

     function pendulumswing() { 
      $('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){ 
       rotation *= -1;      
       if (swingcount >= swings) { 
        pendulumrest(); 
       } else { 
        swingcount++; 
        pendulumswing();       
       } 

      }); 
     } 

     function pendulumrest() { 
      $('#pendulum-parent').animate({rotate: 0},(swingtime/1.5), "swing");  
     } 

     $('#pendulum-child').mouseenter(function() { 
      init(); 
     }); 
    }); 
})(jQuery);  
</script> 

, BTW Javascript Patterns는 JS 학습을위한 아주 좋은 책이다. 정확히 초급 책은 아니지만 그는 모든 것을 제대로 설명합니다. 그리고 저는 개인적으로 Good Parts 서적보다 훨씬 더 읽기 쉽다고 생각합니다.