jquery animate một div xoay

Question

Tôi muốn xoay một div trong một chức năng Animate như

$('div').animate({rotate: '30deg'},1000); 

Tôi đã thấy điều này:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Nhưng tôi muốn biết nếu có một cách chính thức hơn để làm điều đó hoặc ít nhất là một cách khác.

Cảm ơn

Answer 1

Nếu bạn đang mở để sử dụng CSS3 kết hợp với jQuery, có lẽ phương pháp này có thể sử dụng một số cho bạn:

HTML

<div id="click-me">Rotate</div> 

<div id="rotate-box"></div> 

CSS

#rotate-box{ 

    width:50px; 
    height:50px; 
    background:#222222; 

} 

@-moz-keyframes rotatebox /*--for firefox--*/{ 

    from{ 
     -moz-transform:rotate(0deg); 
    }  
    to{ 
     -moz-transform:rotate(360deg); 
    }      

} 

@-webkit-keyframes rotatebox /*--for webkit--*/{ 

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

} 

#click-me{ 
    font-size:12px; 
    cursor:pointer; 
    padding:5px; 
    background:#888888; 
} 

Và giả định rằng các yếu tố trong câu hỏi là nghĩa vụ phải xoay theo một bấm vào một liên kết/div nút /, jQuery của bạn sẽ trông giống như thế này:

jQuery

$(document).ready(function(){ 
    $('#click-me').click(function(){ 
     $('#rotate-box').css({ 

     //for firefox 
     "-moz-animation-name":"rotatebox", 
     "-moz-animation-duration":"0.8s", 
     "-moz-animation-iteration-count":"1", 
      "-moz-animation-fill-mode":"forwards", 

     //for safari & chrome 
     "-webkit-animation-name":"rotatebox", 
     "-webkit-animation-duration":"0.8s", 
     "-webkit-animation-iteration-count":"1", 
     "-webkit-animation-fill-mode" : "forwards", 

     }); 
    }); 
}); 

Vì vậy, kể từ jQuery có nhưng để có thể hỗ trợ xoay (deg) trong .animate(), tôi đã đánh lừa bằng cách xác định trước các khung hình động trong CSS3 và gán nhãn hoặc số nhận dạng cho hoạt ảnh cụ thể đó. Trong ví dụ này, nhãn/số nhận dạng đó được xác định là rotatebox.

Điều gì xảy ra từ đây là thời điểm div được nhấp được nhấp vào, đoạn mã jQuery sẽ sử dụng .css() và gán các thuộc tính cần thiết vào phần tử xoay. Thời điểm những thuộc tính này được gán, sẽ có một cây cầu từ phần tử đến khung hình hoạt ảnh CSS3, do đó cho phép hoạt ảnh thực thi. Bạn cũng có thể kiểm soát tốc độ của hoạt ảnh bằng cách thay đổi thuộc tính thời lượng hoạt ảnh.

Cá nhân tôi nghĩ rằng phương pháp này chỉ cần thiết nếu các sự kiện nhấp chuột hoặc di chuyển chuột được yêu cầu để kích hoạt xoay. Nếu xoay được cho là chạy ngay lập tức khi tải tài liệu, thì việc sử dụng CSS3 một mình sẽ đủ. Điều tương tự cũng áp dụng nếu sự kiện di chuột được kích hoạt để xoay vòng - bạn chỉ cần xác định thuộc tính hoạt ảnh CSS3 liên kết phần tử với hoạt ảnh xoay trong các lớp giả của phần tử.

Phương pháp của tôi ở đây đơn giản dựa trên giả định rằng một sự kiện nhấp là bắt buộc để kích hoạt xoay hoặc jQuery bằng cách nào đó được yêu cầu để đóng một phần trong điều này. Tôi hiểu rằng phương pháp này khá tẻ nhạt nên nếu có ai đó có ý kiến ​​đóng góp, vui lòng đề xuất. Cũng lưu ý rằng vì phương pháp này liên quan đến CSS3, nó sẽ không hoạt động như trên IE8 và bên dưới.

Answer 2

QTransform cho phép bạn xoay, nghiêng, chia tỷ lệ và dịch và hoạt động trên trình duyệt chéo.

Tải xuống và inlcude QTransform.js vào html của bạn.

<script src="js/qTransform.js"></script>

Cung cấp cố định chiều cao chiều rộng để div của bạn (s) và thêm đoạn mã sau:

$('#box4').delay(300).animate({rotate: '20deg'}, 500); 
$('#box5').delay(700).animate({rotate: '50deg'}, 500); 
$('#box6').delay(1200).animate({rotate: '80deg'}, 500); 

nơi (box4, box5 & box6 là div id của tôi).

delay(300), delay(700) & delay(1200) bắt đầu hoạt ảnh sau 300, 500 và 1200 mili giây. Và 500 ở cuối là thời lượng cho hoạt ảnh.

Nếu bạn muốn cung cấp góc xoay theo cách thủ công, bạn có thể làm như sau:

Biến góc thành biến. ví dụ.

var degAngle = 60; 

và thêm nó vào kịch bản như

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500); 

Bạn cũng có thể cung cấp nhiều hiệu ứng như quy mô cùng với vòng xoay. Ví dụ:

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500); 

Tại sao QTransform?

Đến ngày jQuery không hỗ trợ hoạt ảnh CSS3. Plugin này có thể giúp bạn hoàn thành mục tiêu của mình.

Hy vọng điều này phù hợp với bạn.

Answer 3

Cách đơn giản nhất tôi cảm thấy là ví dụ này trên jsfiddle

$(function() { 
    var $elie = $("img"), degree = 0, timer; 
    rotate(); 
    function rotate() { 

     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
     $elie.css('transform','rotate('+degree+'deg)');      
     timer = setTimeout(function() { 
      ++degree; rotate(); 
     },5); 
    } 

    $("input").toggle(function() { 
     clearTimeout(timer); 
    }, function() { 
     rotate(); 
    }); 
}); 

http://jsfiddle.net/eaQRx/

Answer 4

Dưới đây là đoạn code tôi sử dụng để động quy mô và luân chuyển sử dụng jQuery:

var $elem = $('#myImage'); 
    $({ deg: 0 }).animate({ deg: 359 }, { 
     duration: 600, 
     step: function (now) { 
      var scale = (2 * now/359); 
      $elem.css({ 
       transform: 'rotate(' + now + 'deg) scale(' + scale + ')' 
      }); 
     } 
    }); 

này về cơ bản vòng từ 0 đến 359, xoay hình ảnh của tôi bằng nhiều độ, và cũng có tỷ lệ giữa 0 và 2, vì vậy hình ảnh tăng từ không có gì đến kích thước gấp đôi trong hoạt ảnh.

Answer 5

Giải pháp này sử dụng thuộc tính dữ liệu CSS3, JQuery và HTML5. Nó cho phép bạn xoay nhiều lần theo cùng một hướng bằng cách sử dụng tính năng nới lỏng CSS3. Các giải pháp CSS3 khác thường xoay một chiều và sau đó quay lại một cách khác. Chỉ xoay một chiều (ví dụ theo chiều kim đồng hồ) rất hữu ích cho một thứ như nút làm mới hoặc tải.

<style> 
    .rotate{ 
     -moz-transition: all 0.2s ease; 
     -webkit-transition: all 0.2s ease; 
     transition: all 0.2s ease; 
    } 
</style> 

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div> 

<script> 
    $(".rotate").click(function(){ 
     var rotate = 180; 
     var elem = $(this); 

     //get the current degree 
     var currentDegree = 0; 
     if(typeof(elem.attr('data-degree')) != 'undefined') { 
      currentDegree += parseInt(elem.attr('data-degree'), 10); 
     } 

     //calculate the new degree 
     var newDegree = currentDegree + rotate; 

     //modify the elem css 
     elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'}); 
     elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'}); 
     elem.css('transform','rotate(' + newDegree + 'deg)'); 

     //store the degree for next time 
     elem.attr('data-degree', newDegree); 
    }); 
</script> 

Lưu ý: Tôi lưu trữ mức độ hiện tại trong thuộc tính dữ liệu để tránh phải phân tích ma trận chuyển đổi.