пытается повернуть элемент div с помощью jQuery, управляющего командой преобразования css3

Question

По сути, у меня есть таймер, который рассчитывает каждые полсекунды, и он должен обновлять степень, а div должен вращаться до новой степени. Конечный результат этого (теоретически) должен быть несколько плавным постоянно вращающимся делителем.

К сожалению, он доходит до поворота на 1 градус, а затем градус не обновляется снова, хотя, согласно журналу консоли, число все еще увеличивается.

Есть предложения?

setInterval(function()
    {
        var i = 0;
            i++;

        $('#nav').css({'-webkit-transform' : 'rotate(' + i + 'deg)'});

        console.log(i);
    }
    , 1000);

Спасибо!

Answer 1

Каждый раз, когда вызывается эта функция, вы устанавливаете переменную i обратно в ноль:

var i = 0;

... затем добавление одного.

i++;

Так что всегда будет «1». Вам нужно хранить это значение где-то еще, ИЛИ анализировать его каждый раз из атрибута css, а затем добавлять его. Вот первое решение в качестве примера:

var rotate_degrees = 0;

setInterval(function()
{
    rotate_degrees++;
    $('#nav').css({'-webkit-transform' : 'rotate(' + rotate_degrees + 'deg)'});
    console.log(rotate_degrees);
}
, 1000);

Разница заключается в объявлении varialbe за пределами области действия функции, а не внутри.

Answer 2

Переменная i является локальной по отношению к функции, поэтому она всегда будет 1. Измените имя на что-то вроде revolutionCount и объявите его глобально (например, вне всех функций)

Кроме того, вы захотите выполнить модульАрифметика 360.