jquery - 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)');
});

这样，您的“转换”属性将在每次点击时发生变化（直到有人点击 1 亿次左右）。

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