問題描述
我想在動畫函數中旋轉一個 div，例如
I would like to rotate a div in an animate function such as
$('div').animate({rotate: '30deg'},1000);
我找到了這個:
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html
但我想知道是否有更正式的方式來做到這一點，或者至少是不同的方式.
But I want to know if there is a more official way to do it or at least a different way.
謝謝
推薦答案
如果你愿意將 CSS3 與 jQuery 結合使用，也許這個方法對你有用:
If you're open to using CSS3 in combination with jQuery, perhaps this method may be of some use to you:
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;
}
假設有問題的元素應該在單擊鏈接/div/按鈕時旋轉，您的 jQuery 將如下所示:
And assuming that the element in question is supposed to rotate upon a click of a link/div/button, your jQuery will look something like this:
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",
});
});
});
因此，由于 jQuery 還不能在 .animate() 中支持 rotate(deg)，所以我通過在 CSS3 中預定義動畫關鍵幀并為該特定動畫分配標簽或標識符有點作弊.在此示例中，該標簽/標識符定義為 rotatebox.
So since jQuery has yet to be able to support rotate(deg) in .animate(), I've kinda cheated by pre-defining the animation key frames in CSS3 and assigning a label or identifier to that particular animation. In this example, that label/identifier is defined as rotatebox.
從這里開始發生的事情是，當點擊可點擊的 div 時，jQuery 代碼片段將利用 .css() 并將必要的屬性分配給可旋轉元素.分配這些屬性的那一刻，將有一個從元素到 CSS3 動畫關鍵幀的橋梁，從而允許動畫執行.您還可以通過更改 animation-duration 屬性來控制動畫的速度.
What happens from here on is that the moment the clickable div is clicked upon, the jQuery snippet will utilize .css() and assign the necessary properties into the rotatable element. The moment those properties are assigned, there will be a bridge from the element to the CSS3 animation keyframes, thereby allowing for the animation to execute. You can also control the speed of the animation by altering the animation-duration property.
我個人認為只有在需要單擊或鼠標滾動事件來激活旋轉時才需要此方法.如果旋轉應該在文檔加載后立即運行，那么單獨使用 CSS3 就足夠了.如果懸停事件應該激活旋轉，這同樣適用 - 您只需在元素的偽類中定義將元素鏈接到旋轉動畫的 CSS3 動畫屬性.
I personally think that this method is only necessary if click or mouse scroll events are required to activate the rotate. If the rotate is supposed to be running immediately upon document load, then using CSS3 alone will suffice. The same applies to if a hover event is supposed to activate the rotate - you simply define the CSS3 animation properties that links the element to the rotating animation in the element's pseudo classes.
我的方法只是基于這樣的假設，即激活旋轉需要單擊事件，或者需要 jQuery 以某種方式參與其中.我知道這種方法非常乏味，所以如果有人有意見，請隨時提出建議.另請注意，由于此方法涉及 CSS3，因此在 IE8 及以下版本中無法正常工作.
My method here is simply based on the assumption that a click event is required to activate the rotate or that jQuery is somehow required to play a part in this. I understand that this method is pretty tedious so if anyone has a input, feel free to suggest. Do note also that as this method involves CSS3, it will not work as it should on IE8 and below.
這篇關于jquery 為旋轉的 div 設置動畫的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！