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

尝试使用jQuery控制css3转换命令旋转div元素,jquery,css,transform,rotation,Jquery,Css,Transform,Rotation,基本上,我得到的是一个计时器,每半秒计数一次,它应该更新度,div应该旋转到新的度。理论上,这样做的最终结果应该是有点平滑的持续旋转div 可悲的是,它甚至将其旋转1度,然后该度不会再次更新,即使根据控制台日志,该数字仍在计数 有什么建议吗 setInterval(function() { var i = 0; i++; $('#nav').css({'-webkit-transform' : 'rotate(' + i + 'd

基本上,我得到的是一个计时器,每半秒计数一次,它应该更新度,div应该旋转到新的度。理论上,这样做的最终结果应该是有点平滑的持续旋转div

可悲的是,它甚至将其旋转1度,然后该度不会再次更新,即使根据控制台日志,该数字仍在计数

有什么建议吗

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

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

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

谢谢

每次调用该函数时,您都将变量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);

区别在于将变量E声明在函数范围之外而不是函数范围之内。

变量i是函数的局部变量,因此它始终为1。将名称更改为类似rotationCount的名称,并全局声明它,例如在所有函数之外

此外,您还需要进行模360运算