jQuery - 如何「重置」.css（）旋轉圖標？

Question

我有一個圖標，點擊旋轉。

我想「重置」它（沒有頁面刷新），所以它會旋轉每點擊。

$('#icon').click(function(){ 
    $(this).css('transform','rotate(360deg)'); 
}); 

這裏是例子：http://jsfiddle.net/tDvD9/1/

謝謝！

Answer 1

這裏有一個簡單的方法：

var r = 0; 
$('#icon').click(function(){ 
    $(this).css('transform','rotate(' + (r += 360) + 'deg)'); 
}); 

這樣，你的「改造」屬性將每次點擊更改（直到有人點擊了100萬次左右）。

Answer 2

這不是一個非常優雅的解決方案（我認爲最糟糕的部分是你必須知道JS中的過渡時間），但你可以用setTimeout重置它。內setTimeout是必要的，否則將需要3秒轉回0

$(this).css('transform','rotate(360deg)'); 
setTimeout(function() { 
    this.css({'transform': 'rotate(0deg)', 'transition': '0'}); 
    setTimeout(function() { 
     this.css('transition', 'all 3s ease-in-out'); 
    }.bind(this), 10); 
}.bind($(this)), 3000); 

內setTimeout做是爲了

http://jsfiddle.net/ExplosionPIlls/tDvD9/2/

Answer 3

我重置通過後旋轉

var last=0; // rotated degree last time set to 0 
var x=360; //degree to rotate 
var t=9000; // time duration 
$("#item").click(function(){ //click 
    rotateme(x);// call function 
}); 
function rotateme(x){ 
if(last!=0){// if last has value 
    // rotate it back 
    $("#id").animate({ borderSpacing: -last }, { 
     duration:0 
    }); 
} 
// rotate setting x,y position 
$("#id").css("transform-origin",0% 0%); 
$("#id").css("-ms-transform-origin",0% 0%); 
$("#id").css("-webkit-transform-origin",0% 0%); 
$("#id").css("-moz-transform-origin",0% 0%); 
// rotate steps 
$("#id").animate({ borderSpacing: x }, { 
    step: function(now,fx) {  
    $(this).css('-webkit-transform','rotate('+now+'deg)'); 
    $(this).css('-moz-transform','rotate('+now+'deg)'); 
    $(this).css('transform','rotate('+now+'deg)'); 
    }, 
    duration:t 
}); 
last=x; 
}