使用IE9支持的jQuery旋转div [英] Rotating a div using jQuery that's supported by IE9

问题描述

当它们旋转360度时，我会逐渐淡入一些div(基本上只是图像).一切都可以在所有主流浏览器上完美运行，而不仅仅是IE.

I have some divs (basically just images) that I fade in as they rotate 360 degrees. Everything works perfectly in all major browsers, just not 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代码是

Right now my jQuery code is

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

不幸的是，这与我对jQuery的了解程度有关.我知道我可以使用fadeIn()函数来处理不透明度设置，但是有什么方法可以用来处理旋转部分?使用任何种类的插件实际上也是最后一种选择.我只需要它即可在IE9中工作.如果它可以在Chrome，FF和Opera中运行，那也很棒，但这不是必须的.

That's about the extent of my jQuery knowledge unfortunately. I know I can use the fadeIn() function to take care of the opacity setting, but what's available to take care of the rotation part? Using any sort of plugin is really a last resort sort of thing too. I just need it to work in IE9. If it works in Chrome, FF, and Opera, that would be splendid as well, but not a must.

没有类似的东西

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

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

I feel like it's a fairly easy solution, I just can't think of how to do it. Also, I have no idea if that code is valid or not, I'm no JS guru.

推荐答案

听起来像jquery的step函数要解决的问题.它比使用插件轻得多，并且您应该能够自定义不透明度和旋转动画. 这是有关如何使用步进功能的出色文章.从该帖子中推断出以下内容:

Sounds like a problem to be solved by jquery's step function. It's a little more light weight than using a plugin, and you should be able to customize the opacity and rotation animation. This is an excellent post on how to use the step function. Extrapolating from that post I came up with the following:

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
            });
        }
    });
}

这篇关于使用IE9支持的jQuery旋转div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！