JQueryRotate - problem in IE8

Question

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

The image of the sun rises from below, and then with the help of jquery rotates, it is rotated up to 360 degrees. These 2 animations work perfectly in chrome, FF, IE9, but not in IE8.

In IE8, the sun will rise from below to the point where it should be, and then before spinning it will return to its original position and rotate.

I am using jQuery rotate plugin ( http://code.google.com/p/jqueryrotate/ ) for this, I know that it can also be done via css3, but I need it for IE8, therefore, I had to go this route.

Any help on why her behavior in IE8 would be appreciated. In fact, if there is another way to make these animations, it would be nice to know if they work in IE8 as well. Thanks.

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

Answer 1

Change

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

:

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

It should work, I hope.

Answer 2

I would try wrapping the image in my 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 quite sure what is going on in IE8, but hopefully this helps