jQuery rotar/transformar

Question

Me gustaría utilizar esta función para rotar y luego detenerme en un punto o grado en particular. En este momento, el elemento simplemente gira sin detenerse. Aquí está el código:

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

Gracias por su ayuda

Answer 1

Simplemente quite la línea que lo hace girar un grado a la vez y llama al script para siempre.

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

luego pasar el valor deseado en la función ... en este ejemplo 45 por 45 grados.

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

}); 

Cambio .css() a .animate() con el fin de animate the rotation with jQuery. También necesitamos agregar una duración para la animación, 5000 por 5 segundos. Y la actualización de su función original para quitar algo de redundancia y apoyar más navegadores ...

$(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: El código estándar de la animación jQuery CSS anterior no funciona porque al parecer, jQuery .animate() todavía no admite el CSS3 transforms.

Este plugin jQuery se supone para animar la rotación:

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

Answer 2

Es porque tiene una función recursiva en el interior de la rotación. Se hace llamar de nuevo:

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

Toma lo que fuera y que no siempre está en funcionamiento de forma recursiva.

También sugeriría simplemente usando esta función en lugar:

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 

    }); 
} 

Es mucho más limpio y funciona para la mayor cantidad de navegadores.

Answer 3

¿Por qué no usar simplemente, alternarClase al hacer clic?

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

también se puede añadir esto a la 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; 
} 

que se sumará la animación.

PS ...

para responder a su pregunta original:

usted dijo que gira, pero nunca se detiene. Cuando use set timeout, necesita asegurarse de tener una condición que no llame a settimeout o de lo contrario se ejecutará para siempre.Así que para su código:

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

y clearTimeout para detener

clearTimeout(t); 

utilizo este con AJAX

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

Answer 5

me ocurrió con algún tipo de solución al problema. Implica jquery y css. Esto funciona como alternar, pero en lugar de alternar la visualización de los elementos, simplemente cambia sus propiedades con clics alternativos. Al hacer clic en el div, gira el elemento con la etiqueta 180 grados y cuando vuelve a hacer clic en él, el elemento con etiqueta vuelve a su posición original. Si desea cambiar la duración de la animación, simplemente cambie la propiedad de duración de la transición.

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

});