Вращение JavaScript пунктов меню застревает после одного клика - PullRequest
Новая
       8

Вращение JavaScript пунктов меню застревает после одного клика

1 голос
/ 16 января 2011

Ссылка на код

Привет всем, у меня есть круговое меню (ссылка выше), где я хочу, чтобы выбранный элемент повернулся на «3 часа», остановился и открыл содержимое. Следующий выбранный элемент должен вращаться в ту же позицию и делать то же самое и т. Д. Используя плагин jquery.path, мне удалось повернуть 8 элементов один раз, но когда я снова нажимаю на элемент, он просто не продолжает вращаться, но сбрасывает анимацию.

Также я подумал, что, сравнивая левые и верхние значения, можно проверить, находится ли выбранный элемент в позиции «3 часа» или нет. Однако, если у кого-то есть лучшее решение, я хотел бы услышать об этом.

Я не ожидаю, что кто-нибудь передаст мне полностью законченный сценарий, но я был бы признателен за любую помощь, указав на мою ошибку, почему анимация сбрасывается, или указав меня в правильном направлении. Даже если бы гуру JavaScript мог сказать мне, что мой подход к реализации меню - мусор и что он намного сложнее, чем я думаю. Спасибо! :)

Ответы [ 2 ]

0 голосов
/ 16 января 2011 
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);
        };
});
0 голосов
/ 16 января 2011

Просто предположение, но я не вижу, чтобы вы сохраняли текущий угол. Это означает, что вы говорите им начинать с 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 как переменную вне цикла.

Тогда вы можете определить угол diff. как 360 / menu_items.length и затем иметь: 

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

а также (внутри цикла): 

        startAngle += angleDiff;
        endAngle += angleDiff;
...