jquery ccs3時鐘360°= 1秒

這是我的問題。我希望我的圖像逐漸動畫化，以便它在一秒鐘內旋轉360°。所以每1毫秒1deg每1000毫秒360度。目前沒有發生:(jquery ccs3時鐘360°= 1秒

在此先感謝

下面是代碼

CSS：。

#sec { 
    position: absolute; 
    top:200px; 
    left: 300px; 
    transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
    transition: transform 1s; 
}

HTML：

<img id="sec" src="sec-02.png" />

的Javascript：

$(document).ready(function() { 
    setInterval(function() { 
     var srotate = "rotate(1deg)"; 
     $("#sec").css({ 
      "-moz-transform": srotate, 
      "-webkit-transform": srotate 
     }); 
    }, 3); 
});

來源

2012-02-21 user765669

也很好注意的setInterval具有最小的延遲。它高於3ms，但根據版本的不同，瀏覽器可能會有所不同。它在4ms和10ms之間。 – 2012-02-21 15:00:20

您不會遞增旋轉量，因此您不斷將其設置爲1度。

我做了a fiddle of a working example（使用小貓作爲時鐘！）

希望幫助！

來源

2012-02-21 14:56:22 lnrbob

+1小貓：3 – 2012-02-21 14:58:45

謝謝，這正是我想要做的，但仍然不明白我的伎倆。好吧，我明白了;）沒有注意到我的++。再次感謝你 – user765669 2012-02-21 14:59:25

每次函數執行變量'i'增加1.這個變量然後被應用到css值，所以在第一次運行時，值是'1deg'，然後'2deg'，然後'3deg'等等上。當它達到360時，我並沒有打算重置「i」，但@remibreton的答案顯示了這一點。 – lnrbob 2012-02-21 15:04:05

你實際上在做什麼var srotate = "rotate(1deg)";將旋轉設置爲每3毫秒1度。你需要加1每3毫秒一度。上變換

var degree = 1; // Declare outside your interval loop 
setInterval(function(){ // Add this to your loop 
    degree++; 
    if(degree % 360 == 0){ 
     degree = 1; 
    } 
    var str = 'rotate(' + degree + 'deg)'; // str now equals your string for transforms. 
});

jquery ccs3時鐘360°= 1秒

回答

相關問題