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

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

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

Какие-либо предложения?

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

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

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

Спасибо!


jquery css rotation transform
person MeanMatt    schedule 06.04.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Каждый раз, когда эта функция вызывается, вы устанавливаете переменную 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);

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

person ctcherry    schedule 06.04.2011

arrow_upward
1
arrow_downward

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

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

person Richard Schneider    schedule 06.04.2011