jQuery ruotare/trasformare

Question

Mi piacerebbe utilizzare questa funzione per ruotare e fermarsi in un punto o grado particolare. In questo momento l'elemento ruota senza fermarsi. Ecco il codice:

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

Grazie per il vostro aiuto

Answer 1

sufficiente rimuovere la linea che lo ruota di un grado alla volta e richiama lo script per sempre.

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

quindi passare il valore desiderato nella funzione ... in questo esempio 45 per 45 gradi.

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

}); 

Change .css()-.animate() per animate the rotation with jQuery. Abbiamo anche bisogno di aggiungere una durata per l'animazione, 5000 per 5 secondi. E l'aggiornamento funzione originaria per rimuovere un po 'di ridondanza e supporta più browser ...

$(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: Il jQuery CSS codice di animazione standard di cui sopra non funziona perché a quanto pare, jQuery .animate() non supporta ancora il CSS3 transforms.

Questo plugin jQuery si suppone per animare la rotazione:

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

Answer 2

E 'perché avete una funzione ricorsiva all'interno della Ruota. Si chiama di nuovo:

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

Prendere questo e non continuerà a correre in modo ricorsivo.

Vorrei anche suggerire solo utilizzando questa funzione invece:

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 

    }); 
} 

E 'molto più pulito e lavorerà per la maggior quantità di browser.

Answer 3

Perché non usare semplicemente, toggleClass al 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; 
    } 

è possibile aggiungere anche questo 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; 
} 

che aggiungerà l'animazione.

PS ...

per rispondere alla tua domanda iniziale:

hai detto che ruoti, ma non si ferma mai. Quando si utilizza il timeout impostato è necessario assicurarsi di avere una condizione che non chiamerà settimeout altrimenti funzionerà per sempre.Così, per il codice:

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

e clearTimeout per fermare

clearTimeout(t); 

Io uso questo con AJAX

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

Answer 5

mi si avvicinò con un qualche tipo di soluzione al problema. Coinvolge jquery e css. Funziona come l'interruttore, ma invece di alternare la visualizzazione degli elementi, modifica le sue proprietà su clic alternativi. Facendo clic sul div, ruota l'elemento con il tag di 180 gradi e quando si fa nuovamente clic l'elemento con il tag ritorna nella sua posizione originale. Se vuoi cambiare la durata dell'animazione, modifica la proprietà di transizione-durata.

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

});