jQuery döndürme/dönüştürme

Question

Bu işlevi, belirli bir noktadan veya dereceden sonra döndürmek için döndürmek üzere kullanmak isterim. Şu anda eleman durmadan dönüyor. Basitçe bunu bir seferinde bir derece döner ve sonsuza senaryoyu çağıran satırı kaldırmak Yardımlarınız

Answer 1

için

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

Teşekkür: İşte kod.

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

Daha sonra 45 °, bu örnekte 45 de ... işlevi istenen değeri geçirir. animate the rotation with jQuery amacıyla

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

}); 

Değişim .animate() için .css(). Animasyon için 5 saniyeliğine bir süre de eklememiz gerekiyor. Ve orijinal fonksiyonunu güncellenmesi ... bazı fazlalık kaldırmak ve daha fazla tarayıcılar

$(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); 
     } 
}); 

DÜZENLEME: görünüşe göre, jQuery .animate() henüz CSS3 transforms desteklemediği için yukarıdaki standart jQuery CSS animasyon kod çalışmıyor.

Bu jQuery eklentisi

dönüşünü animasyon gerekiyordu: Eğer döndürmek içinde bir özyinelemeli işlevi var çünkü

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

Answer 2

öyle. Kendisini tekrar arıyor: Bunu bir kenara çekip tekrar tekrar çalışmaya devam etmeyecek.

Ben de sadece yerine bu işlevi kullanmanızı öneririz olacaktır:

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 

    }); 
} 

Daha temiz ve tarayıcıların büyük kısmı için çalışacaktır.

Answer 3

Neden sadece kullanmıyorsunuz, toggleClass tıklayın?

js:

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

css: Ayrıca css ekleyebiliriz

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

:

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

animasyon ekleyecektir. Eğer döner ama asla durmaz söyledi

:

PS ...

orijinal soruyu cevaplamak için. Ayarlanmış zaman aşımı kullanırken, yer belirleme çağrısı yapamayacağınız ya da sonsuza kadar koşacağınız bir durumun olduğundan emin olmanız gerekir.Kodunuzdaki Yani:

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

ve clearTimeout

clearTimeout(t); 

durdurmak için bu ben sorunun çözümü çeşit ile geldi AJAX

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

Answer 5

ile kullanmak. Jquery ve css içerir. Bu, geçiş gibi çalışır ancak öğelerin görüntülenmesini değiştirmek yerine, yalnızca alternatif tıklamalarda özelliklerini değiştirir. Bölmeyi tıkladığınızda, öğeyi 180 derece döndürerek öğeyi döndürür ve tekrar tıkladığınızda etiketli öğe orijinal konumuna geri döner. Animasyon süresini değiştirmek isterseniz geçiş süresi özelliğini değiştirin.

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

});