jQuery xoay/chuyển đổi

Question

Tôi muốn sử dụng chức năng này để xoay, sau đó dừng lại ở một điểm hoặc mức cụ thể. Ngay bây giờ phần tử chỉ quay mà không dừng lại. Dưới đây là các mã:

<script type="text/javascript"> 
    $(function() { 
     var $elie = $("#bkgimg"); 
     rotate(0); 
     function rotate(degree) { 

      // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
      // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 

      // Animate rotation with a recursive call 
      setTimeout(function() { rotate(++degree); },65); 
     } 
    }); 
    </script> 

Nhờ sự giúp đỡ của bạn

Answer 1

Đơn giản chỉ cần loại bỏ các dòng đó xoay nó một độ tại một thời điểm và gọi script mãi mãi.

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

Sau đó chuyển giá trị mong muốn vào hàm ... trong ví dụ này 45 cho 45 độ.

$(function() { 

    var $elie = $("#bkgimg"); 
    rotate(45); 

     function rotate(degree) { 
     // For webkit browsers: e.g. Chrome 
      $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
      $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
     } 

}); 

Thay đổi .css()-.animate() để animate the rotation with jQuery. Chúng tôi cũng cần thêm thời lượng cho hoạt ảnh, 5000 trong 5 giây. Và cập nhật chức năng ban đầu của bạn để loại bỏ một số dự phòng và hỗ trợ nhiều trình duyệt ...

$(function() { 

    var $elie = $("#bkgimg"); 
    rotate(45); 

     function rotate(degree) { 
      $elie.animate({ 
         '-webkit-transform': 'rotate(' + degree + 'deg)', 
         '-moz-transform': 'rotate(' + degree + 'deg)', 
         '-ms-transform': 'rotate(' + degree + 'deg)', 
         '-o-transform': 'rotate(' + degree + 'deg)', 
         'transform': 'rotate(' + degree + 'deg)', 
         'zoom': 1 
      }, 5000); 
     } 
}); 

EDIT: Tiêu chuẩn jQuery CSS mã hoạt hình ở trên không hoạt động vì rõ ràng, jQuery .animate() chưa hỗ trợ CSS3 transforms.

jQuery plugin này được coi animate xoay:

http://plugins.jquery.com/project/QTransform

Answer 2

Đó là bởi vì bạn có một hàm đệ quy bên trong xoay. Gọi lại chính nó:

// Animate rotation with a recursive call 
setTimeout(function() { rotate(++degree); },65); 

Hãy dùng nó và nó sẽ không tiếp tục chạy đệ quy.

Tôi cũng đề nghị chỉ sử dụng chức năng này để thay thế:

function rotate($el, degrees) { 
    $el.css({ 
    '-webkit-transform' : 'rotate('+degrees+'deg)', 
    '-moz-transform' : 'rotate('+degrees+'deg)', 
     '-ms-transform' : 'rotate('+degrees+'deg)', 
     '-o-transform' : 'rotate('+degrees+'deg)', 
      'transform' : 'rotate('+degrees+'deg)', 
       'zoom' : 1 

    }); 
} 

Đó là sạch hơn nhiều và sẽ làm việc cho số tiền nhất của các trình duyệt.

Answer 3

Tại sao không chỉ sử dụng, toggleClass khi nhấp?

js:

$(this).toggleClass("up"); 

css:

button.up { 
    -webkit-transform: rotate(180deg); 
     -moz-transform: rotate(180deg); 
     -ms-transform: rotate(180deg); 
     -o-transform: rotate(180deg); 
      transform: rotate(180deg); 
       /* IE6–IE9 */ 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); 
       zoom: 1; 
    } 

bạn cũng có thể thêm video này vào css:

button{ 
     -webkit-transition: all 500ms ease-in-out; 
     -moz-transition: all 500ms ease-in-out; 
     -o-transition: all 500ms ease-in-out; 
     -ms-transition: all 500ms ease-in-out; 
} 

mà sẽ bổ sung thêm các hình ảnh động.

PS ...

để trả lời câu hỏi ban đầu của bạn:

bạn nói rằng nó quay nhưng không bao giờ dừng lại. Khi sử dụng thiết lập thời gian chờ bạn cần phải chắc chắn rằng bạn có một điều kiện mà sẽ không gọi settimeout hoặc người nào khác nó sẽ chạy mãi mãi.Vì vậy, đối mã của bạn:

<script type="text/javascript"> 
    $(function() { 
    var $elie = $("#bkgimg"); 
    rotate(0); 
    function rotate(degree) { 

     // For webkit browsers: e.g. Chrome 
    $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     // For Mozilla browser: e.g. Firefox 
    $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 


    /* add a condition here for the extremity */ 
    if(degree < 180){ 
     // Animate rotation with a recursive call 
     setTimeout(function() { rotate(++degree); },65); 
    } 
    } 
    }); 
    </script> 

Answer 4

t = setTimeout(function() { rotate(++degree); },65); 

và clearTimeout ngừng

clearTimeout(t); 

tôi sử dụng này với AJAX

success:function(){ clearTimeout(t); } 

Answer 5

tôi đã đưa ra một số loại giải pháp cho vấn đề. Nó liên quan đến jquery và css. Điều này hoạt động giống như chuyển đổi nhưng thay vì bật tắt hiển thị các phần tử, nó chỉ thay đổi thuộc tính của nó khi nhấp chuột thay thế. Khi nhấp vào div, nó sẽ xoay phần tử với thẻ 180 độ và khi bạn nhấp lại vào phần tử đó, thẻ sẽ trả về vị trí ban đầu của nó. Nếu bạn muốn thay đổi thời lượng hoạt ảnh, chỉ cần thay đổi thuộc tính thời lượng chuyển đổi.

CSS

#example1{ 
transition-duration:1s; 
} 

jQuery

$(document).ready(function() { var toggle = 1; 
    $('div').click(function() { 
     toggle++; 
     if ((toggle%2)==0){ 
      $('#example1').css({'transform': 'rotate(180deg)'}); 
     } 
     else{ 
      $('#example1').css({'transform': 'rotate(0deg)'}); 
     } 
    }); 

});