使用 IE9 支持的 jQuery 旋转 div

Posted 2023-05-08

【中文标题】使用 IE9 支持的 jQuery 旋转 div

【英文标题】：Rotating a div using jQuery that's supported by IE9

【发布时间】：2013-07-27 05:18:57

【问题描述】：

我有一些 div（基本上只是图像）在 360 度旋转时会淡入。一切在所有主流浏览器中都能完美运行，只是 IE 不行。

有效的 CSS3 代码

#box

    width: 400px;
    height: 400px;
    display: inline-block;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition: all 0.8s 1s ease-in-out;
    -webkit-transition: all 0.8s 1s ease-in-out;
    -moz-transition: all 0.8s 1s ease-in-out;
    -o-transition: all 0.8s 1s ease-in-out;
    opacity:0;


#box.animate

    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    opacity:100;

现在我的 jQuery 代码是

$("#box").addClass("animate");

不幸的是，这就是我对 jQuery 的了解程度。我知道我可以使用fadeIn() 函数来处理不透明度设置，但是有什么可以处理旋转部分？使用任何类型的插件也确实是不得已而为之。我只需要它在 IE9 中工作。如果可以在 Chrome、FF 和 Opera 中运行，那也很棒，但不是必须的。

有没有类似的东西

$("#box").animate(function() 
    $(this).fadeIn(1000).rotate(360);
);

我觉得这是一个相当简单的解决方案，我只是想不出该怎么做。另外，我不知道该代码是否有效，我不是 JS 大师。

【问题讨论】：

什么在 IE 中不起作用？旋转？褪色？两者都有？

IE9 会忽略我在 CSS 中的旋转和不透明度设置。

如果下界有效，首先将代码剥离为两者之一（不透明度），然后单独工作。您是否研究过 IE9 是否支持您正在使用的 css？ caniuse.com/css-transitions

是的，我做过研究。 IE9 不支持我的 CSS，这就是我研究 jQuery 备份计划的原因。

当有插件可以为您完成时，自己重写它是一个坏主意。尤其是因为你不想要插件，你基本上是在要求我们为你写一个插件。

【参考方案1】：

听起来像是jquery的step函数要解决的问题。它比使用插件轻一点，你应该能够自定义不透明度和旋转动画。 This 是一篇关于如何使用 step 函数的优秀帖子。从那篇文章推断，我得出以下结论：

function AnimateRotate(div_id, angle) 
    var $elem = $(div_id);
    $(deg: 0).animate(deg: angle, 
        duration: 1000,
        step: function(now) 
            $elem.css(
                transform: 'rotate(' + now + 'deg)'
            );
        
    );
    $(opacity: 0).animate(opacity: angle, 
        duration: 1000,
        step: function(now) 
            $elem.css(
                opacity: now
            );
        
    );

【讨论】：

@codedme 我的理解是转换有效（来自帖子的“有效的 CSS3 代码”部分），而发帖人只是不知道如何对其进行动画处理（让它从原始值 - 与 fadeIn 的工作方式类似）

【参考方案2】：

我能想到的唯一解决方案是 CSS Sand paper。它是 CSS 转换的 polyfill：

检查此链接： http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

#box
  
   -sand-transform: rotate(360deg);
  

这是您可以旋转它的方式，但要制作动画，您需要使用 .animate() 步进函数，例如 @dbratcher 解决方案。