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

【问题标题】：trying to rotate a div element with jQuery controlling css3 transform command尝试使用 jQuery 控制 css3 转换命令旋转 div 元素
【发布时间】：2011-04-06 01:58:49
【问题描述】：

基本上，我要做的是一个计时器，它每半秒计数一次，它应该更新度数，并且 div 应该旋转到新的度数。这样做的最终结果应该（理论上）是一个有点平滑的不断旋转的 div。

可悲的是，它会旋转 1 度，然后即使根据控制台日志，该数字仍在增加，但度数不会再次更新。

有什么建议吗？

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

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

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

谢谢！

【问题讨论】：

标签： jquery css transform rotation

【解决方案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);

不同之处在于声明变量在函数的范围之外而不是在内部。

【讨论】：

【解决方案2】：

变量 i 是函数的本地变量，因此它始终为 1。将名称更改为类似于 rotationCount 的名称并在全局范围内声明它（例如，在所有函数之外）

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

【讨论】：