3

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 code that works

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

Right now my jQuery code is

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

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.

Isn't there something like

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

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.

Timothy Adams
  • 191
  • 1
  • 1
  • 16
  • what doesn't work in IE? the rotate? the fade? both? – Kevin B Jul 26 '13 at 19:49
  • IE9 ignores my rotate and opacity settings in CSS. – Timothy Adams Jul 26 '13 at 19:51
  • If nether works, start by stripping the code down to only one of the two (opacity) then get that working alone. Have you researched to see if IE9 even supports the css you're using? http://caniuse.com/css-transitions – Kevin B Jul 26 '13 at 19:52
  • Yes I've done research. IE9 does not support my CSS which is why I'm looking into a jQuery backup plan. – Timothy Adams Jul 26 '13 at 19:53
  • @JonnySooter I already tried that. Note my code above. – Timothy Adams Jul 26 '13 at 19:54
  • but.. you haven't provided any of your attempts to do it yourself or any reasearch that you've done on your own. There are plugins for this, but asking for a plugin isn't allowed here. – Kevin B Jul 26 '13 at 19:54
  • @KevinB http://stackoverflow.com/questions/17889192/shouldnt-this-css-work-in-ie9 – Timothy Adams Jul 26 '13 at 19:55
  • Isn't opacity between 0 and 1? IE doesn't seem to like % opacity in my limited experience. – Jesse Jul 26 '13 at 20:06
  • 1
    Re-writing it yourself is kind of a bad idea when there's plugins that will do it for you. Especially since you don't want a plugin, you're basically asking us to write a plugin for you. – Colin DeClue Jul 26 '13 at 20:11
  • http://stackoverflow.com/questions/3789984/jquery-how-do-i-animate-a-div-rotation – LorDex Jul 26 '13 at 20:27
  • unlikely to be relevant, but as a point of best practice, you should put the unprefixed version of a style *after* the prefixed versions. – Spudley Jul 27 '13 at 20:28
  • @Spudley Why is that? I've never had problems with how it is now, as far as placement is concerned. – Timothy Adams Jul 27 '13 at 20:34
  • The idea is that a browser might initially support a feature with a prefix with limited or incorrect functionality, and then a later version supports the feature properly without the prefix. But the older bad version will be kept for backward compat. If you've got both in your CSS, the browser will pick the last one it sees that it recognises (same rules as any other CSS code), so if you put the prefixed version last, you'll get the broken functionality even when the browser supports the full feature properly. This is rare but it does occur in several real cases, so it's not just theoretical. – Spudley Jul 27 '13 at 20:47

2 Answers2

1

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
            });
        }
    });
}
Community
  • 1
  • 1
dbratcher
  • 82
  • 5
  • @codedme it was my understanding that the transform worked (from the "CSS3 code that works" portion of the post) and the poster just didn't know how to animate it (make it spin in from the original value - in a similar manner to how fadeIn works) – dbratcher Jul 29 '13 at 00:40
0

The only solution i can think of is CSS Sand paper.It is a polyfill for CSS transformations:

check this link: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

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

This how you can rotate it but to have an animation you will need to use .animate() step function something like @dbratcher solution would do the thing.

codedme
  • 616
  • 3
  • 12