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

Question

代码链接

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

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

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

Answer 1

只是这里的猜测，但我没有看到你在任何地方存储当前角度。这意味着您告诉它们每次从 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);
        };

});

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

顺便说一句：您

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

然后您可以定义角度差异。作为 360/menu_items.length 然后有：

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

以及这个（在循环内）：

        startAngle += angleDiff;
        endAngle += angleDiff;

Answer 2

var menu_items = Array("#box_8", "#box_7", "#box_6", "#box_5", "#box_4", "#box_3", "#box_2", "#box_1");
var menuLength = menu_items.length;
var angleDiff  = 360 / menuLength;
var fin = 0;

$('a.box').click(function() {
var startAngle = 180 + fin * angleDiff;
var endAngle = 225 + fin * angleDiff;
fin++;
    var topLock = "154px";
    var leftLock = "260px";

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