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立即动画。所以你看到了第一次挥杆。第一个动画结束后，它会检查摆动计数，该计数仍然是先前的值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>

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

第一次活动后悬停动画不能完全正常工作

1 个答案: