hover animation not working fully after first event

Question

warning: jquery/javascript newbie in the house. I used the tutorial here to make an animation where an image swings back and forth on hover.

However, after the first hover event, the image will only go back and forth 1 time, whereas on the first hover event it swings back and forth 5 times (the number defined by swings variable). I want it to swing the same number of times on every hover event.

I have tried changing the rotation, swings, and swingcount variables and also trying to make the pendulumrest function match the swing function, and changing the if/else statement for pendulum swing. Nothing works - what am I doing wrong? Here is the code:

<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

If you walk through the code, then you will notice that the pendulum swing will stop only if swingcount >= swings. This means that the first time you move your mouse over the element, the swingcount will keep incrementing till it hits 5 and then the swinging stops.

The second time you move your mouse over the element, it will run the animation as per init (which I presume is resetting the position of the pendulum). It then calls pendulumswing which does an animation immediately. So you see the first swing. Once the first animation is over, it checks the swing count, which is still at its previous value of 6. This doesn't meet the condition and the pendulumrest is called instead.

So, as @Alex mentioned in his comment, you need to reset the value of swingcount to 0 before you start your animations. Implementing the thoughts in his comments, your code could be as follows:

<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 is a very good book for learning JS. While it's not exactly a beginners book, he does explain everything properly. And I personally find it a lot more readable than the Good Parts book.