jquery 为旋转的 div 设置动画 [英] jquery animate a rotating div

问题描述

我想在动画函数中旋转一个 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 设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！