jQuery animar un div rotación

Question

me gustaría hacer girar un div en una función animado como

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

he encontrado esto:

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

Pero quiero saber si hay una manera más oficial de hacerlo o al menos de una manera diferente.

Gracias

Answer 1

Si usted está abierto a usar CSS3 en combinación con jQuery, tal vez este método pueden ser de alguna utilidad para usted:

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

Y suponiendo que el elemento en cuestión se supone que debe girar a un clic de un/div/botón de enlace, el jQuery se verá algo como esto:

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

     }); 
    }); 
}); 

Así que desde jQuery tiene sin embargo, para ser capaz de soportar rotate (deg) en .animate(), he hecho un poco de trampa al predefinir los cuadros clave de animación en CSS3 y asignar una etiqueta o identificador a esa animación en particular. En este ejemplo, esa etiqueta/identificador se define como rotatebox.

Lo que ocurre a partir de ahora es que en el momento en que se hace clic en el elemento div que se puede hacer clic, el fragmento jQuery utilizará .css() y asignará las propiedades necesarias al elemento rotativo. En el momento en que se asignan esas propiedades, habrá un puente desde el elemento hasta los fotogramas clave de animación CSS3, lo que permitirá la ejecución de la animación. También puede controlar la velocidad de la animación alterando la propiedad de duración de la animación.

Personalmente, creo que este método solo es necesario si se requieren eventos de desplazamiento de clic o mouse para activar la rotación. Si se supone que la rotación se está ejecutando inmediatamente después de la carga del documento, entonces usar solo CSS3 será suficiente. Lo mismo se aplica a si un evento de desplazamiento se supone que activa la rotación: simplemente define las propiedades de animación de CSS3 que vinculan el elemento a la animación giratoria en las pseudo clases del elemento.

Mi método aquí se basa simplemente en la suposición de que se requiere un evento de clic para activar la rotación o que jQuery de alguna manera es necesario para formar parte de esto. Entiendo que este método es bastante tedioso, así que si alguien tiene una opinión, no dude en sugerir. Tenga en cuenta también que como este método implica CSS3, no funcionará como debería en IE8 y abajo.

Answer 2

QTransform le permite rotar, sesgar, escalar y traducir y funciona a través del navegador.

Descargue e incluya el QTransform.js en su html.

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

proporcionar una altura de ancho fijo a su div (s) y añadir la siguiente secuencia de comandos:

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

donde (box4, box5 & BOX6 son mi div id).

El delay(300), delay(700) & delay(1200) inicia la animación después de 300, 500 y 1200 milisegundos. Y el 500 al final es la duración de la animación.

Si desea proporcionar manualmente el ángulo de rotación se puede hacer así:

Tome el ángulo en la variable. p.ej.

var degAngle = 60; 

y agregarlo a la secuencia de comandos como

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

También puede proporcionar los múltiples efectos como escala junto con la rotación. Por ejemplo,

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

Por qué QTransform?

Hasta la fecha jQuery no es compatible con animaciones CSS3. Este complemento puede ayudarte a lograr tu objetivo.

Espero que esto funcione para usted.

Answer 3

El más simple que siento es este ejemplo de 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

Aquí está el código que solía animar escala y la rotación usando 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 + ')' 
      }); 
     } 
    }); 

Este bucles básicamente desde 0 hasta 359, rota mi imagen en tantos grados, y también escala entre 0 y 2, por lo que la imagen crece de cero a doble durante la animación.

Answer 5

Esta solución utiliza atributos de datos CSS3, JQuery y HTML5. Le permite rotar repetidamente en la misma dirección usando CSS3 easing. Otras soluciones de CSS3 generalmente giran en una dirección y luego en la otra. Girar solo en una dirección (en el sentido de las agujas del reloj, por ejemplo) es útil para algo así como un botón de actualización o carga.

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

Nota: Guardo el grado actual en un atributo de datos para evitar tener que analizar la matriz de transición.