Предметы по кругу с большими углами

Question

Я создаю круговую навигацию с выбранным элементом. Когда пользователь нажимает на любой элемент, он перемещается к определенной точке. Все работает хорошо, за исключением тех случаев, когда вы продолжаете нажимать на элементы мышления, а затем появляется точка, когда анимация ведет себя по-разному, а элементы перемещаются по кругу на 360 градусов и возвращаются в исходное состояние, пока вы не повторите сценарий. Я хочу, чтобы он был плавным, как в первый раз, например, сколько раз пользователь нажимает на элемент, он должен двигаться плавно.

Код JSFIDDLE LINK Как только вы нажмете на элементы, вы увидите это поведение

// rotate circle functions
var p = $(".cirlec-slider-bg");
$(".cirlec-slider-bg .f-courses").clone().appendTo(p);

var a = -($('.cirlec-slider-bg').width() / 2);
var b = $('.cirlec-slider-bg .f-courses').length;
var c = 360 / b;
rotateCircle(c, 'domReady');

$(".cirlec-slider-bg").on("click", ".f-courses", function(e) {
    if ($(this).hasClass('active')) {} else {
        $('.cirlec-slider-bg .f-courses').removeClass("active");
        $(this).addClass('active');
        var dataAngle = parseInt($(this).attr('data-angle'));
        var maxangle = 90 - dataAngle;


        rotateCircle(maxangle, 'onitemClick')
    }

});

function rotateCircle(maxangle, type) {
    $('.cirlec-slider-bg .f-courses').each(function(index) {

        if (type == 'onitemClick') {
            var maxAngle = maxangle;
            var dataAngle2 = parseInt($(this).attr('data-angle'));
            var maxangle2 = dataAngle2 + maxAngle;
            var d = (index) * c;
        }
        if (type == 'domReady') {
            var maxAngle = maxangle;
            var maxangle2 = (index) * maxAngle;
        }

        var m = [
            "translate(-50%, -50%) rotate(", -90, "deg) translateY(" + 100 + "px) rotate(", 90, "deg)"
        ];
        m[1] = maxangle2;
        m[3] = 0 - maxangle2;
        $(this).css({
            "transform": m.join("")
        });

        $(this).attr('data-angle', maxangle2);
    })
}

Answer 1

Печать значения dataAngle в обработчике кликов показывает, что оно иногда превышает допустимый диапазон [0, 180] - оно может стать отрицательным или больше 360.

Средство защиты было добавить следующую строку после получения dataAngle:

dataAngle -= Math.floor(dataAngle / 360.0) * 360;

(обратите внимание, что это не то же самое, что dataAngle % 360)

Исправлено JSFiddle