зависание анимации не работает полностью после первого события

Question

предупреждение: jquery/javascript новичок в доме. Я использовал tutorial here, чтобы сделать анимацию, где изображение качается вперед и назад при наведении.

Однако после первого события наведения изображение будет двигаться только вперед и назад 1 раз, тогда как при первом событии наведения он разворачивается назад и вперед 5 раз (число определяется переменной качания). Я хочу, чтобы он качался столько же раз в каждом событии наведения.

Я попытался изменить переменные вращения, качелей и swingcount, а также попытаться совместить функцию маятника с функцией поворота и изменить инструкцию 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. Это означает, что при первом перемещении мыши над элементом, swingcount будет продолжать увеличиваться до тех пор, пока он не достигнет 5, а затем качание остановится.

Во второй раз, когда вы наводите указатель мыши на элемент, он будет запускать анимацию в соответствии с init (что, я полагаю, сбрасывает положение маятника). Затем он вызывает pendulumswing, который делает анимацию сразу. Итак, вы видите первый качели. Как только первая анимация завершена, она проверяет счетчик swing, который все еще находится на прежнем значении 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.