旋轉DIV使用jQuery

我需要旋轉格一次，我的輪胎使用此代碼旋轉DIV使用jQuery

$.fn.rotate = function() { 
var self = $(this);  

for (var degree = 0; degree <= 360; degree++){ 
    self.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
    self.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    self.css({ 'transform': 'rotate(' + degree + 'deg)'}); 
} 
}; 

$("img").rotate();

，但它並不在所有的工作。什麼問題？如何使工作？

UPD 我已經找到解決方案，它的工作原理

$.fn.rotate = function() { 
var self = $(this), 
degree = 0; 
var interval = setInterval(function() { 
    self.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
    self.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
    self.css({ 'transform': 'rotate(' + degree + 'deg)'}); 
    degree++; 
    if (degree === 360) { 
      clearInterval(interval); 
     } 
    }, 5); 
}; 

$("img").rotate();

http://jsfiddle.net/eaQRx/2086/

來源

2014-03-31 truslivii.lev

你得到個任何錯誤e控制檯？ –

也許你需要在每次更新之間使用超時以確保它顯示在屏幕上？ –

你正在旋轉360度，這是它開始在相同的位置。似乎工作得很好（270度旋轉的例子）http://jsfiddle.net/j08691/cxeD3/。我也相信它是'-webkit-transform'。 – j08691

我的解決辦法：

$.fn.clockwiseRotate = function() { 
$(this).each(function() { 
    var self = $(this), 
     degree = 0; 
    var interval = setInterval(function() { 
     self.css({ 
      '-webkit-transform': 'rotate(' + degree + 'deg)' 
     }); 
     self.css({ 
      '-moz-transform': 'rotate(' + degree + 'deg)' 
     }); 
     self.css({ 
      'transform': 'rotate(' + degree + 'deg)' 
     }); 
     degree++; 
     if (degree === 361) { 
      clearInterval(interval); 
     } 
    }, 1); 
}); 
}; 

$.fn.counterclockwiseRotate = function() { 
    $(this).each(function() { 
     var self = $(this), 
      degree = 360; 
     var interval = setInterval(function() { 
      self.css({ 
       '-webkit-transform': 'rotate(' + degree + 'deg)' 
      }); 
      self.css({ 
       '-moz-transform': 'rotate(' + degree + 'deg)' 
      }); 
      self.css({ 
       'transform': 'rotate(' + degree + 'deg)' 
      }); 
      degree--; 
      if (degree === -1) { 
       clearInterval(interval); 
      } 
     }, 1); 
    }); 
}; 
$('img:first-child').clockwiseRotate(); 
$('img:last-child').counterclockwiseRotate();

http://jsfiddle.net/eaQRx/2100/

來源

2014-03-31 16:21:26

旋轉DIV使用jQuery

回答

相關問題