jquery - jQuery - .css()回転アイコンを「リセット」する方法は?

Question

クリックすると回転するアイコンがあります。

（ページを更新せずに）「リセット」したいので、クリックするたびに回転します。

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

例を次に示します: http://jsfiddle.net/tDvD9/1/

ありがとう！

Answer 1

簡単な方法の 1 つを次に示します。

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

そうすれば、クリックごとに「変換」プロパティが変更されます（誰かが1億回程度クリックするまで）。

Answer 2

これはあまり洗練された解決策ではありません (最悪の部分は、JS で遷移時間を知る必要があることだと思います) が、setTimeout. 内側setTimeoutが必要です。そうしないと、回転が 0 に戻るのに 3 秒かかります。

$(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;
}