jQueryRotate - Проблема в IE8

Question

JS скрипку за то, что я хочу добиться: http://jsfiddle.net/g3qgS/1/

Изображение солнца поднимается из нижней части, а затем с помощью Jquery вращаться, его поворота до 360 градусов. Эти 2 анимации выполняются отлично в chrome, FF, IE9, но не в IE8.

В IE8 солнце будет подниматься снизу до точки, где оно должно быть, а затем перед вращением оно возвращается в исходное положение и вращается.

Я использую плагин jquery rotate (http://code.google.com/p/jqueryrotate/) для этого, я знаю, что это также можно сделать с помощью css3, но мне также понадобилось это для IE8, поэтому пришлось идти этим путем.

Любая помощь по поводу того, почему его поведение в IE8 будет оценено по достоинству. На самом деле, если есть еще один способ сделать эти анимации, было бы приятно узнать, если они будут работать и в IE8. Спасибо.

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

ЯШ:

$(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

Изменить

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

к этому:

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

Должно работать, я надеюсь.

Answer 2

Я хотел бы попробовать завернуть изображение в отдельном контейнере:

<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> 

, а затем анимировать обертку вместо изображения

<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> 

Я не совсем уверен, что это происходит в IE8, но мы надеемся, что это поможет