尝试使用jQuery控制css3转换命令旋转div元素

Question

基本上,我得到的是一个计时器,每半秒计算一次,并且它应该更新程度,div应该旋转到新的程度.最终的结果应该(理论上)是一个有点平滑的不断旋转的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);

有什么不同之处在于声明变量超出函数范围而不是内部.