jquery 为旋转的 div 设置动画

Posted 2023-03-06

【中文标题】jquery 为旋转的 div 设置动画

【英文标题】：jquery animate a rotating div

【发布时间】：2012-04-04 06:48:04

【问题描述】：

我想在动画函数中旋转一个 div，例如

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

我找到了这个：

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

但我想知道是否有更正式的方式来做到这一点，或者至少是不同的方式。

谢谢

【问题讨论】：

通过快速的 Google 搜索，我发现了一个不同的库，我认为（经过 1 分钟的研究）更好，因为它可以在更多浏览器中使用。 Take a look!

我不能使用那个，因为你必须调用 $('div').rotate() 来旋转，而你不能从 animate() 函数中做到这一点。我试过了，但它真的没用。另外，很难设置持续时间。

哦，可惜了。您当然可以尝试编写自己的插件，利用另一个插件的技术。如果您希望它在大多数浏览器中工作，那确实是最好的方法......

链接code.google.com/p/jqueryrotate不存在了

【参考方案1】：

如果您愿意将 CSS3 与 jQuery 结合使用，也许这种方法可能对您有用：

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 将如下所示：

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。

从这里开始发生的事情是，当点击可点击的 div 时，jQuery sn-p 将利用 .css() 并将必要的属性分配给可旋转元素。在分配这些属性的那一刻，将有一个从元素到 CSS3 动画关键帧的桥梁，从而允许动画执行。您还可以通过更改 animation-duration 属性来控制动画的速度。

我个人认为只有在需要单击或鼠标滚动事件来激活旋转时才需要此方法。如果旋转应该在文档加载后立即运行，那么单独使用 CSS3 就足够了。如果悬停事件应该激活旋转，这同样适用 - 您只需在元素的伪类中定义将元素链接到旋转动画的 CSS3 动画属性。

我的方法只是基于这样的假设，即激活旋转需要单击事件，或者需要 jQuery 以某种方式参与其中。我知道这种方法非常乏味，所以如果有人有意见，请随时提出建议。另请注意，由于此方法涉及 CSS3，因此在 IE8 及以下版本中无法正常工作。

【参考方案2】：

我觉得最简单的就是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/

【参考方案3】：

QTransform 允许您旋转、倾斜、缩放和平移，并且可以跨浏览器工作。

下载 QTransform.js 并将其包含在您的 html 中。

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

为您的 div 提供固定的高度-宽度并添加以下脚本：

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

哪里（box4、box5 和 box6 是我的 div id）。 delay(300), delay(700) & delay(1200) 在 300、500 和 1200 毫秒后启动动画。最后的 500 是动画的时长。

如果你想手动提供旋转角度，你可以这样做：

取变量中的角度。例如

var degAngle = 60;

并将其添加到脚本中

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

您还可以提供多种效果，例如缩放和旋转。例如，

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

为什么选择 QTransform？

到目前为止，jQuery 不支持 CSS3 动画。这个插件可以帮助你完成你的目标。

希望这对你有用。

【参考方案4】：

此解决方案使用 CSS3、JQuery 和 HTML5 数据属性。它允许您使用 CSS3 缓动在同一方向上重复旋转。其他 CSS3 解决方案通常旋转一种方式，然后返回另一种方式。仅旋转一种方式（例如顺时针方向）对于刷新或加载按钮之类的东西很有用。

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

注意：我将当前度数存储在数据属性中，以避免解析转换矩阵。

【参考方案5】：

这是我使用 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 + ')'
            );
        
    );

这基本上是从 0 到 359 循环，将我的图像旋转这么多度，并且还在 0 到 2 之间缩放，因此图像在动画期间从零增长到两倍大小。