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

发布于 2024-10-30 14:11:05 字数 372 浏览 2 评论 0原文

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

遗憾的是，它最多旋转 1 度，然后度数就不会再次更新，尽管根据控制台日志，数字仍在计数。

有什么建议吗？

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

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

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

谢谢！

原文

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.

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.

Any suggestions?

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

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

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

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一梦等七年七年为一梦 2024-11-06 14:11:05

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

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

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

var i = 0;

...then adding one.

i++;

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);

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

回复收藏 0 原文