第一个事件后悬停动画无法完全正常工作

Question

警告：家里有 jquery/javascript 新手。我使用tutorial here 制作了一个动画，其中图像在悬停时来回摆动。

但是，在第一次悬停事件之后，图像只会来回移动 1 次，而在第一次悬停事件时，它会来回摆动 5 次（由 swings 变量定义的次数）。我希望它在每个悬停事件中摆动相同的次数。

我尝试更改旋转、摆动和摆动计数变量，并尝试使摆锤功能与摆动功能相匹配，并更改摆锤摆动的 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 立即执行动画。所以你看到了第一个摆动。一旦第一个动画结束，它会检查摇摆计数，它仍然是之前的值 6。这不满足条件，而是调用 pendulumrest。

因此，正如@Alex 在他的评论中提到的，您需要在开始动画之前将 swingcount 的值重置为 0。实现他的 cmets 中的想法，您的代码可能如下：

<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>

顺便说一句，Javascript Patterns 是一本非常好的学习 JS 的书。虽然这不是一本初学者的书，但他确实正确地解释了一切。而且我个人觉得它比 Good Parts 书更具可读性。