jQuery: làm cách nào để tạo hiệu ứng xoay vòng xoay vòng?

Question

Tôi có thể xoay một div với css và jquery .rotate, nhưng tôi không biết cách tạo hiệu ứng động.

Answer 1

Sử dụng số WebkitTransform/-moz-transform: rotate(Xdeg). Điều này sẽ không hoạt động trong IE, nhưng giải pháp zachstronaut của Matt cũng không hoạt động trong IE.

Nếu bạn muốn hỗ trợ IE, bạn sẽ phải xem xét sử dụng canvas như tôi tin Raphael does.

Đây là đoạn mã jQuery đơn giản xoay các phần tử trong đối tượng jQuery. Luân chuyển có thể được bắt đầu và dừng lại:

$(function() { 
 
    var $elie = $("img"), degree = 0, timer; 
 
    rotate(); 
 
    function rotate() { 
 
     
 
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
 
     timer = setTimeout(function() { 
 
      ++degree; rotate(); 
 
     },5); 
 
    } 
 
    
 
    $("input").toggle(function() { 
 
     clearTimeout(timer); 
 
    }, function() { 
 
     rotate(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
 
<input type="button" value=" Toggle Spin " /> 
 
<br/><br/><br/><br/> 
 
<img src="http://i.imgur.com/ABktns.jpg" />

Answer 2

Nếu bạn đang thiết kế cho thiết bị iOS hoặc chỉ webkit, bạn có thể làm điều đó với không JS nào:

CSS:

@-webkit-keyframes spin { 
from { 
    -webkit-transform: rotate(0deg); 
} 
to { 
    -webkit-transform: rotate(360deg); 
    } 
} 

.wheel { 
    width:40px; 
    height:40px; 
    background:url(wheel.png); 
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-duration: 3s; 
} 

Điều này sẽ kích hoạt hoạt ảnh khi tải. Nếu bạn muốn kích hoạt nó trên di chuột, nó có thể trông như thế này:

.wheel { 
    width:40px; 
    height:40px; 
    background:url(wheel.png); 
} 

.wheel:hover { 
    -webkit-animation-name: spin; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: ease-in-out; 
    -webkit-animation-duration: 3s; 
} 

Answer 3

Dựa trên câu trả lời của Peter Ajtai, đây là một plugin nhỏ có thể giúp người khác. Tôi đã không thử nghiệm trên Opera và IE9 nhưng cũng nên làm việc trên các trình duyệt này.

$.fn.rotate = function(until, step, initial, elt) { 
    var _until = (!until)?360:until; 
    var _step = (!step)?1:step; 
    var _initial = (!initial)?0:initial; 
    var _elt = (!elt)?$(this):elt; 

    var deg = _initial + _step; 

    var browser_prefixes = ['-webkit', '-moz', '-o', '-ms']; 
    for (var i=0, l=browser_prefixes.length; i<l; i++) { 
     var pfx = browser_prefixes[i]; 
     _elt.css(pfx+'-transform', 'rotate('+deg+'deg)'); 
    } 

    if (deg < _until) { 
     setTimeout(function() { 
      $(this).rotate(_until, _step, deg, _elt); //recursive call 
     }, 5); 
    } 
}; 

$('.my-elt').rotate() 

Answer 4

Nếu bạn muốn chỉ là một tùy chọn jQuery, điều này sẽ làm việc:

$(el).stop().animate(
    {rotation: 360}, 
    { 
    duration: 500, 
    step: function(now, fx) { 
     $(this).css({"transform": "rotate("+now+"deg)"}); 
    } 
    } 
); 

này làm việc với jQuery 1.8, mà sẽ chăm sóc của CSS tiền tố tự động. jQuery không hoạt ảnh luân phiên vì vậy tôi đang đặt transform:rotate() trong chức năng tùy chỉnh step. Nó chỉ có thể làm việc bắt đầu từ 0.

Demo: http://jsfiddle.net/forresto/ShUgD/

IE9 và Mobile Safari biến đổi 4 hỗ trợ CSS nhưng không chuyển tiếp CSS, vì vậy tôi đã đưa ra shim đơn giản này, sử dụng tính năng Modernizr thử nghiệm:

if (Modernizr.csstransitions) { 
    $(el).css({ 
    "transition": "all 500ms ease-in-out" 
    }); 
} 

$(el).click(function(){ 
    var rotateTo = 360; 
    if (Modernizr.csstransitions) { 
    $(el).css({"transform": "rotate("+rotateTo+"deg)"}); 
    } else { 
    $(el).stop().animate(
     {rotation: rotateTo}, 
     { 
     duration: 500, 
     step: function(now, fx) { 
      $(this).css({"transform": "rotate("+now+"deg)"}); 
     } 
     } 
    ); 
    } 
}); 

Ở trên sẽ sử dụng chuyển tiếp CSS khi khả dụng.

Answer 5

Tôi đã sử dụng

$.fn.rotate = function(degrees, step, current) { 
 
    var self = $(this); 
 
    current = current || 0; 
 
    step = step || 5; 
 
    current += step; 
 
    self.css({ 
 
     '-webkit-transform' : 'rotate(' + current + 'deg)', 
 
     '-moz-transform' : 'rotate(' + current + 'deg)', 
 
     '-ms-transform' : 'rotate(' + current + 'deg)', 
 
     'transform' : 'rotate(' + current + 'deg)' 
 
    }); 
 
    if (current != degrees) { 
 
     setTimeout(function() { 
 
      self.rotate(degrees, step, current); 
 
     }, 5); 
 
    } 
 
}; 
 

 
$(".r90").click(function() { $("span").rotate(90) }); 
 
$(".r0").click(function() { $("span").rotate(0, -5, 90) });

span { display: inline-block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<span>potato</span> 
 

 
<button class="r90">90 degrees</button> 
 
<button class="r0">0 degrees</button>

Answer 6

này làm việc cho tôi:

function animateRotate (object,fromDeg,toDeg,duration){ 
    var dummy = $('<span style="margin-left:'+fromDeg+'px;">') 
    $(dummy).animate({ 
     "margin-left":toDeg+"px" 
    },{ 
     duration:duration, 
     step: function(now,fx){ 
      $(object).css('transform','rotate(' + now + 'deg)'); 
     } 
    }); 
}; 

Answer 7

tôi cần phải xoay một đối tượng nhưng có một cuộc gọi trở lại chức năng. Lấy cảm hứng từ câu trả lời của John Kern tôi đã tạo ra điều này.

function animateRotate (object,fromDeg,toDeg,duration,callback){ 
     var dummy = $('<span style="margin-left:'+fromDeg+'px;">') 
     $(dummy).animate({ 
      "margin-left":toDeg+"px" 
     }, 
     { 
      duration:duration, 
      step: function(now,fx){ 
       $(object).css('transform','rotate(' + now + 'deg)'); 
       if(now == toDeg){ 
        if(typeof callback == "function"){ 
         callback(); 
        } 
       } 
      } 
     } 
    )}; 

Làm điều này bạn chỉ cần gọi vòng xoay trên đối tượng như vậy ...(trong trường hợp của tôi, tôi đang thực hiện nó trên một biểu tượng hình tam giác tiết lộ đã được xoay theo mặc định là 270 degress và tôi xoay nó thêm 90 độ đến 360 độ ở 1000 mili giây. Đối số cuối cùng là cuộc gọi lại sau khi hoạt ảnh có kết thúc.

animateRotate($(".disclosure_icon"),270,360,1000,function(){ 
       alert('finished rotate'); 
      }); 

Answer 8

Tính đến bây giờ bạn vẫn không thể quay animate với jQuery, nhưng bạn có thể với CSS3 hình ảnh động, sau đó chỉ cần thêm và loại bỏ các lớp học với jQuery để làm cho hình ảnh động xảy ra.

JSFiddle demo

---

HTML

<img src="http://puu.sh/csDxF/2246d616d8.png" width="30" height="30"/> 

CSS3

img { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
transform: rotate(-90deg); 
transition-duration:0.4s; 
} 

.rotate { 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
-o-transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
transform: rotate(0deg); 
transition-duration:0.4s; 
} 

jQuery

$(document).ready(function() { 
    $("img").mouseenter(function() { 
     $(this).addClass("rotate"); 
    }); 
    $("img").mouseleave(function() { 
     $(this).removeClass("rotate"); 
    }); 
});