试图用jQuery控制css3 transform命令旋转div元素 [英] trying to rotate a div element with jQuery controlling css3 transform command

问题描述

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

Basically, what I've got going is a timer that counts every half second and on that it should update the degree and the div should be rotated to the new degree. The end result of this should (theoretically) be a somewhat smooth constantly rotating div.

可悲的是，它转动到1度，然后度数不更新

Sadly, it goes as far as rotating it 1 degree and then the degree is not updated again even though according to the console log the number is still counting up.

有没有建议？

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

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

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

$ b

谢谢！

Thanks!

推荐答案

每次调用此函数时，您都将变量 i 设置为零：

Every time that function is called you are setting the variable i back to zero:

var i = 0;

...然后添加一个。

...then adding one.

i++;

因此它将始终为1。你需要将该值存储在其他地方，或者每次从css属性解析它，然后添加一个。这里是前面的解决方案的例子：

So it will always be "1". You need to store that value somewhere else, OR parse it from the css attribute each time, then add one. Here is the former solution as an example:

var rotate_degrees = 0;

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

有什么区别是声明varialbe 而不是里面。

What makes the difference is declaring the varialbe outside the scope of the function as opposed to inside.

这篇关于试图用jQuery控制css3 transform命令旋转div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！