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.
Con una búsqueda rápida en Google encontré una biblioteca diferente que creo (después de 1 minuto de investigación) es mejor, porque funcionará en más buscadores. [¡Echa un vistazo!] (Http://code.google.com/p/jqueryrotate/) – Frog
No puedo usar esa porque tienes que llamar a $ ('div'). Rotar() para rotar y puedes No lo hagas desde la función animate(). Lo intenté pero es realmente inútil. Además, es difícil establecer la duración. – user1246035
Oh, una pena.Por supuesto, puede intentar escribir su propio plugin que utiliza la técnica del otro. Si quieres que funcione en la mayoría de los navegadores, esa es realmente la mejor manera de hacerlo ... – Frog