jQueryRotate - Issue in IE8

Question

js fiddle for what I want to achieve : http://jsfiddle.net/g3qgS/1/

The image of sun rises from bottom and then using jquery rotate, its being rotated till 360 degrees. These 2 animations run fine in chrome, FF, IE9 but not in IE8.

In IE8, the sun will rise from bottom till the point where it is supposed to , then before the rotation, it comes back to its original position and rotates.

I am using jquery rotate plugin (http://code.google.com/p/jqueryrotate/) for this, I know this can also be done through css3, but I needed it for IE8 as well, hence had to go this way.

Any help on why its behaving weird in IE8 would be appreciated. In fact, if there's another way to do these animations, would be glad to know, provided they work in IE8 as well. Thank you.

HTML:

<div class="cont">    
    <img src="http://s22.postimg.org/fjo3h0p2l/sun.png" class="sun"/>
</div>

CSS:

.cont {background:#000; height:345px; position:relative;}
.sun {position:absolute; bottom:0px; left:20px;}

js:

  $(window).load(function () {
    HomePageAnimation.sunRise();
});


var HomePageAnimation = {

    sunRise: function () {
        $(".sun").animate(
        { "bottom": "150px" },
        { duration: 2000,
            complete: function () { HomePageAnimation.rotateSun(360) }
        });
    },

    rotateSun: function (angle) {
        var sun = $(".sun")
        sun.rotate({
            angle: 90,
            animateTo: 360           
        });
    }

};

score 1 · Accepted Answer · answered Oct 09 '13 at 13:01

1

Change

  sunRise: function () {
    $(".sun").rotate(0);

to this:

  sunRise: function () {
    $(".sun").rotate(0);
    $(".sun").animate(

It should work I hope.

answered Oct 09 '13 at 13:01

Paweł Witkowski Photography

958
1
14
25

score 0 · Answer 2 · answered Oct 03 '13 at 17:43

I would try to wrap the image in its own container:

<div class="cont" style="background:#000; height:345px; position:relative;">
    <div class="sun-wrap" style="position:absolute; bottom:0px; left:20px;">
        <img src="http://s22.postimg.org/fjo3h0p2l/sun.png" class="sun"/>
    </div>
</div>

and then animate the wrapper instead of the image

<script type="text/javascript">
    $(window).load(function () {
        HomePageAnimation.sunRise();
    });


    var HomePageAnimation = {

        sunRise: function () {
            $(".sun-wrap").animate(
                    { "bottom": "150px" },
                    { duration: 2000,
                        complete: function () { HomePageAnimation.rotateSun(360) }
                    });
             },

        rotateSun: function (angle) {
            var sun = $(".sun")
            sun.rotate({
                angle: 90,
                animateTo: 360
            });
        }

    };
</script>

I'm not exactly sure what's going on in IE8 but hopefully this will help

I tried it, but didnt work. Wrapped it in a div, but it didnt rotate at all, just went down below a little. — whyAto8, Oct 03 '13 at 18:16

jQueryRotate - Issue in IE8

2 Answers2

Linked