菜单项的 JavaScript 旋转在单击后卡住

Question

Link to code

大家好，我有一个圆形菜单(链接上方)，我希望所选项目旋转到“3 点钟”，停在那里并打开内容。下一个选定的项目应该旋转到相同的位置并执行相同的操作等。使用 jquery.path 插件，我设法旋转 8 个项目一次，但是当我再次单击某个项目时，它根本不会继续旋转，而是重置动画。

我还认为，通过比较左侧值和顶部值，可以检查所选项目是否位于“3 点钟”位置。但是，如果有人有更好的解决方案，我很想听听。

我不期望任何人给我一个完整完成的脚本，但我会感谢任何帮助，指出我的错误，为什么动画重置或为我指明正确的方向。即使 JavaScript 大师可以告诉我，我实现菜单的方法很垃圾，而且比我想象的要复杂得多。谢谢! :)

Answer 1

这里只是一个猜测，但我没有看到你在任何地方存储当前 Angular 。这意味着您告诉它们每次从 0 开始并迭代原始数组。您需要在函数外部存储某种偏移量。像这样的事情可能会起作用:

var fin = -1;
$('a.box').click(function() {

    var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
    fin++;

    var startAngle = 180 + fin * 45;
    var endAngle = 135 + fin * 45;
    var topLock = "154px";
    var leftLock = "260px";

    //$(this).addClass('selected');

        for (var i=0; i < menu_items.length; i++) {

            startAngle += 45;
            endAngle += 45;
            $(menu_items[i]).animate({
                path: new $.path.arc({
                    center: [154, 154],
                    radius: 106,
                    start: startAngle,
                    end: endAngle,
                    dir: -1
                }),
                opacity: '1'
                },400);
        };

});

我还认为你的结束 Angular 和开始 Angular 不对。看起来表盘正在切换动画的数字，这意味着它可能正在向后移动物体，然后将它们动画到当前位置。这可能可以通过将 fin(上面的新变量)设置为 0 作为初始值来解决。

顺便说一句:你

1. 您可能希望将 menu_items 存储在点击处理程序之外。
2. 您还可以将 menu_items.length 存储为循环外部的变量。

然后您可以定义 Angular 差异。如 360/menu_items.length 然后有:

  var angleDiff  = 360 / menuLength;
  var startAngle = 180 + fin * angleDiff;
  var endAngle = 135 + fin * angleDiff;

以及这个(在循环内):

        startAngle += angleDiff;
        endAngle += angleDiff;