Me gustaría utilizar esta función para girar luego se detiene en un punto en particular o grado. Ahora el elemento sólo gira sin parar. 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

InformationsquelleAutor Andrea | 2011-10-29

5 Comentarios

  1. 36

    Simplemente eliminar la línea que gira es un grado en un tiempo y llama a la secuencia de comandos para siempre.

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

    A continuación, pase el valor deseado en la función… en este ejemplo 45 de 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() para animar la rotación con jQuery. También tenemos que añadir la duración de la animación, 5000 durante 5 segundos. Y la actualización de su función original para quitar algo de redundancia y el apoyo de los navegadores más…

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

    EDICIÓN: El estándar CSS jQuery animación de código anterior no funciona porque, aparentemente, jQuery .animate() todavía no soporta CSS3 transforms.

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

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

    • Que sólo gira la imagen. Realmente quiero para animar/girar y parar en un determinado punto o grado. Lo siento, debería haber mencionado que antes. Gracias.
    • Estoy mirando en su página en Safari y en la imagen se gira 45 grados. Mirando el DOM en la consola, es el que muestran la forma correcta de CSS de -webkit-transform se ha aplicado. Tal vez tu navegador no soporte CSS 3.
    • simplemente cambiar .css a .animate. Véase mi edición.
    • lo siento, se me olvidó mencionar el «tiempo» necesario para la animación. He editado de nuevo.
    • jQuery animate() no admite transforms me acabo de enterar. Aquí es un plugin que se supone que debemos hacerlo. plugins.jquery.com/project/QTransform
    • Ya lo he conseguido. Voy a tener que trabajar en el doc un poco. Gracias por tu ayuda. He probado algunos otros plugins, pero no podía conseguir que vaya. Tal vez este es el uno!
    • eres bienvenido. La buena suerte.

  2. 11

    Es porque tiene una función recursiva dentro de girar. Se llama a sí mismo de nuevo:

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

    Sacarlos de ahí y no va a seguir funcionando de forma recursiva.

    Te recomiendo también que sólo el uso de 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 va a trabajar para la mayor cantidad de navegadores.

  3. 7

    ¿Por qué no usar simplemente, toggleClass en haga clic en?

    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 puede agregar 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 añadir la animación.

    PS…

    para responder a su pregunta original:

    usted dijo que gira pero nunca se detiene. Cuando se utiliza establecer el tiempo de espera que usted necesita para asegurarse de que usted tiene una condición que no le va a llamar settimeout o de lo contrario se ejecutará siempre. Así que para 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)'});
    
    
        /* add a condition here for the extremity */ 
        if(degree < 180){
          //Animate rotation with a recursive call
          setTimeout(function() { rotate(++degree); },65);
         }
        }
        });
        </script>
  4. 1

    Se me ocurrió algún tipo de solución para el problema. Implica jquery y css. Esto funciona como alternar, pero en lugar de activar o desactivar la visualización de elementos simplemente cambia sus propiedades sobre la alternativa de clics. Al hacer clic en el div se gira el elemento con la etiqueta de 180 grados y cuando usted haga clic de nuevo en el elemento con la etiqueta vuelve a su posición original. Si desea cambiar la animación duración acaba de transición de cambio de duración de la propiedad.

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

    });

  5. 0
    t = setTimeout(function() { rotate(++degree); },65);

    y clearTimeout para detener

    clearTimeout(t);

    Puedo usar esto con AJAX

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

Dejar respuesta

Please enter your comment!
Please enter your name here