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