2012-03-19 22 views
5

vorrei ruotare un div in una funzione animate comejquery animare un div rotante

$('div').animate({rotate: '30deg'},1000); 

Ho trovato questo:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Ma voglio sapere se c'è un modo più ufficiale per farlo o almeno in un modo diverso.

Grazie

+0

Con una rapida ricerca su Google ho trovato una libreria diversa che penso (dopo 1 minuto di ricerca) è migliore, perché funzionerà con più browser. [Dai un'occhiata!] (Http://code.google.com/p/jqueryrotate/) – Frog

+0

Non posso usare quello perché devi chiamare $ ('div'). Ruotare() per ruotare e puoi Fallo dalla funzione animate(). L'ho provato ma è davvero inutile. Inoltre è difficile impostare la durata. – user1246035

+0

Oh, peccato.Ovviamente potresti provare a scrivere il tuo plugin che utilizza la tecnica dell'altro. Se vuoi che funzioni nella maggior parte dei browser, questo è davvero il modo migliore per farlo ... – Frog

risposta

9

se siete aperti a utilizzare CSS3 in combinazione con jQuery, forse questo metodo possono essere di qualche utilità per voi:

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

e supponendo che l'elemento in questione si suppone per ruotare su un clic di un pulsante link/div /, il tuo jQuery sarà simile a questa:

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

     }); 
    }); 
}); 

Quindi, dal momento jQuery ha ancora per poter supportare ruotare (deg) in .animate(), ho un po 'ingannato definendo i fotogrammi chiave dell'animazione in CSS3 e assegnando un'etichetta o un identificatore a quella particolare animazione. In questo esempio, tale etichetta/identificatore è definito come rotatebox.

Cosa accade da qui è che il momento il div cliccabile viene cliccato sopra, il frammento di jQuery utilizzerà css() e assegnare le proprietà necessarie nell'elemento ruotabile. Nel momento in cui tali proprietà vengono assegnate, ci sarà un ponte dall'elemento ai fotogrammi chiave dell'animazione CSS3, consentendo così l'esecuzione dell'animazione. Puoi anche controllare la velocità dell'animazione modificando la proprietà durata-animazione.

Personalmente ritengo che questo metodo sia necessario solo se sono necessari eventi di scorrimento del mouse o del mouse per attivare la rotazione. Se si suppone che ruoti sia in esecuzione immediatamente dopo il caricamento del documento, sarà sufficiente utilizzare solo CSS3. Lo stesso vale per se un evento hover deve attivare la rotazione - è sufficiente definire le proprietà dell'animazione CSS3 che collega l'elemento all'animazione rotante nelle pseudo classi dell'elemento.

Il mio metodo qui si basa semplicemente sul presupposto che è necessario un evento click per attivare la rotazione o che jQuery è in qualche modo richiesto per svolgere un ruolo in questo. Capisco che questo metodo sia piuttosto noioso, quindi se qualcuno ha un input, sentiti libero di suggerire. Si noti inoltre che poiché questo metodo coinvolge CSS3, non funzionerà come dovrebbe su IE8 e sotto.

2

QTransform consente di ruotare, inclinare, ridimensionare e tradurre e funziona cross browser.

Scarica e include lo QTransform.js nel tuo html.


<script src="js/qTransform.js"></script>

Fornire un'altezza-larghezza fissa al div (s) e aggiungere il seguente script:

$('#box4').delay(300).animate({rotate: '20deg'}, 500); 
$('#box5').delay(700).animate({rotate: '50deg'}, 500); 
$('#box6').delay(1200).animate({rotate: '80deg'}, 500); 

dove (box4, box5 & box6 sono la mia div id di).

delay(300), delay(700) & delay(1200) avvia l'animazione dopo 300, 500 e 1200 millisecondi. E il 500 alla fine è la durata dell'animazione.

Se si desidera fornire manualmente l'angolo di rotazione che si può fare in questo modo:

Prendere l'angolo in variabile. per esempio.

var degAngle = 60; 

e aggiungerlo allo script come

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500); 

È inoltre possibile fornire gli effetti multipli come scala insieme a rotazione. Per esempio,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500); 


Perché QTransform?

Fino alla data jQuery non supporta le animazioni CSS3. Questo plugin può aiutarti a raggiungere il tuo obiettivo.



Spero che questo funzioni per voi.

4

Il più semplice che sento è questo esempio su jsfiddle

$(function() { 
    var $elie = $("img"), degree = 0, timer; 
    rotate(); 
    function rotate() { 

     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); 
     $elie.css('transform','rotate('+degree+'deg)');      
     timer = setTimeout(function() { 
      ++degree; rotate(); 
     },5); 
    } 

    $("input").toggle(function() { 
     clearTimeout(timer); 
    }, function() { 
     rotate(); 
    }); 
}); 

http://jsfiddle.net/eaQRx/

0

Ecco il codice che ho usato per animare scala e la rotazione utilizzando jQuery:

var $elem = $('#myImage'); 
    $({ deg: 0 }).animate({ deg: 359 }, { 
     duration: 600, 
     step: function (now) { 
      var scale = (2 * now/359); 
      $elem.css({ 
       transform: 'rotate(' + now + 'deg) scale(' + scale + ')' 
      }); 
     } 
    }); 

Questo loop fondamentalmente da 0 a 359, ruota la mia immagine di tanti gradi e scala anche tra 0 e 2, quindi l'immagine cresce dal nulla alla doppia dimensione durante l'animazione.

0

Questa soluzione utilizza attributi di dati CSS3, JQuery e HTML5. Ti permette di ruotare ripetutamente nella stessa direzione usando l'easing di CSS3. Altre soluzioni CSS3 di solito ruotano in un modo e poi indietro nell'altro. Ruotare solo in un modo (ad esempio in senso orario) è utile per qualcosa come un pulsante di aggiornamento o di caricamento.

<style> 
    .rotate{ 
     -moz-transition: all 0.2s ease; 
     -webkit-transition: all 0.2s ease; 
     transition: all 0.2s ease; 
    } 
</style> 

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div> 

<script> 
    $(".rotate").click(function(){ 
     var rotate = 180; 
     var elem = $(this); 

     //get the current degree 
     var currentDegree = 0; 
     if(typeof(elem.attr('data-degree')) != 'undefined') { 
      currentDegree += parseInt(elem.attr('data-degree'), 10); 
     } 

     //calculate the new degree 
     var newDegree = currentDegree + rotate; 

     //modify the elem css 
     elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'}); 
     elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'}); 
     elem.css('transform','rotate(' + newDegree + 'deg)'); 

     //store the degree for next time 
     elem.attr('data-degree', newDegree); 
    }); 
</script> 

Nota: immagazzina il grado corrente in un attributo di dati per evitare di dover analizzare la matrice di transizione.