JavaScript rotation of menu items gets stuck after one click

Link to code

Hello all, I have a circle menu (above link) where I want the selected item to rotate to "3 o'clock", stop there and open the content. Next selected item is supposed to rotate to the same position and do the same etc. Using the jquery.path plugin, I managed to rotate the 8 items once but when I click again on an item, it simply doesn't continue to rotate but resets the animation.

Also I thought that by comparing left and top values, one could check if the selected item is on the "3 o'clock" position开发者_JAVA技巧 or not. However if someone has a better solution, I would love to hear about it.

I'm not expecting anyone to hand me a completely finished script but I would appreciate any help, pointing out my mistake why the animation resets or pointing me in the right direction. Even if a JavaScript guru could tell me that my approach to implement the menu is garbage and that it's way more complicated than I think. Thanks! :)

---

Just a guess here, but I don't see you storing the current angle anywhere. This means that you're telling them to start at 0 each time and iterate through the original array. You need to have some sort of offset stored outside of the function. Something like this could work:

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);
        };

});

I also think that your end angle and start angle are off. It looks like the dial is switching numbers for the animation, which means that it is probably moving things backwards and then animating them to their current positions. This would probably be solved by setting fin (the new variable above) to 0 as an initial value.

As an asside: you

1. You may want to store menu_items outside of the click handler.
2. You also store menu_items.length as a variable outside of the loop.

Then you could define the angle diff. as 360/menu_items.length and then have:

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

as well as this (inside the loop):

        startAngle += angleDiff;
        endAngle += angleDiff;

---

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);
        };
});