bootstrap - jquery datatable sort date format

jQuery rotar/transformar

Question

Me gustaría usar 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 tu ayuda

Answer 1

¿Por qué no solo usar, toggleClass on click?

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 puedes agregar esto al 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;
}

Lo que agregará la animación.

PD...

para responder a su pregunta original:

Dijiste que gira pero nunca se detiene. Cuando utilice el tiempo de espera establecido, debe asegurarse de que tiene 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 2

Es porque tienes una función recursiva dentro de rotar. Se está llamando de nuevo:

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

Sácalo y no seguirá corriendo recursivamente.

También sugeriría simplemente usar esta función en su 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 funcionará para la mayoría de los navegadores.

Answer 3

Se me ocurrió algún tipo de solución al problema. Se trata de jquery y css. Esto funciona como alternar, pero en lugar de alternar la visualización de elementos, solo cambia sus propiedades con clics alternativos. Al hacer clic en el div, rota el elemento con la etiqueta 180 grados y cuando hace clic nuevamente, el elemento con la 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 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)''});
      }
  });

});

Answer 4

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

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

Luego pase el valor deseado a la función ... en este ejemplo 45 para 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)''});
        }

});

Cambie .css() por .animate() para animar la rotación con jQuery . También necesitamos agregar una duración para la animación, 5000 durante 5 segundos. Y actualizando su función original para eliminar cierta redundancia y admitir 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);
        }
});

EDITAR: el código de animación jQuery CSS estándar anterior no funciona porque aparentemente, jQuery .animate() aún no admite las transforms CSS3.

Este complemento jQuery se supone que anima la rotación:

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

Answer 5

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

y clearTimeout para detener

clearTimeout(t);

Yo uso esto con AJAX

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