jQuery: ¿cómo puedo animar una rotación div?

Question

Puedo rotar un div con css, y jquery .rotar, pero no sé cómo animarlo.

Answer 1

Haz uso de WebkitTransform/-moz-transform: rotate(Xdeg). Esto no funcionará en IE, pero la solución de Matt zachstronaut tampoco funciona en IE.

Si quieres apoyar IE también, que tendrá que mirar en el uso de un canvas como yo creo Raphael does.

Aquí hay un fragmento de jQuery simple que rota los elementos en un objeto jQuery. La rotación puede iniciarse y detenerse:

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

Si usted está diseñando para un dispositivo iOS o simplemente webkit, puede hacerlo sin ningún tipo JS:

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

Esto activaría la animación en carga. Si quería desencadenar en vuelo estacionario, que podría tener este aspecto:

.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

Basado en respuesta Peter Ajtai, aquí es un pequeño plugin jQuery que pueden ayudar a los demás. No probé en Opera e IE9, pero también debería funcionar en estos navegadores.

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

Si sólo desea una opción de jQuery, esto va a funcionar:

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

Esto funciona con jQuery 1.8, que se encarga de CSS prefijar automáticamente. jQuery no anima la rotación, así que estoy poniendo el transform:rotate() en la función personalizada step. Sólo se puede trabajar a partir de 0.

Demostración: http://jsfiddle.net/forresto/ShUgD/

IE9 y Mobile Safari 4 transforma el apoyo de CSS, pero no transiciones CSS, por lo que me ocurrió con esta simple cuña, utilizando pruebas de función Modernizr:

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

Lo anterior usará transiciones CSS cuando estén disponibles.

Answer 5

He estado usando

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

Esto funciona para mí:

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

que necesitaba para girar un objeto, sino que tenga una llamada función de la espalda. Inspirado por la respuesta de John Kern, creé esto.

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

Haciendo esto, puede simplemente llamar la rotación del objeto como tal ...(en mi caso lo estoy haciendo en un ícono de triángulo de revelación que ya se ha girado de forma predeterminada a 270 grados y lo estoy rotando otros 90 grados a 360 grados a 1000 milisegundos. El último argumento es la devolución de llamada después de que la animación terminado.

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

Answer 8

a partir de ahora todavía no puede rotaciones animados con jQuery , pero se puede con CSS3 animaciones, entonces simplemente añadir y eliminar la clase con jQuery para que se produzca la animación.

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