私が達成したいことのためのjsフィドル:http://jsfiddle.net/g3qgS/1/
太陽が下から昇るイメージを jquery 回転で 360 度回転させます。これら 2 つのアニメーションは、Chrome、FF、IE9 では問題なく動作しますが、IE8 では動作しません。
IE8では、太陽は下から昇り、自転する前に元の位置に戻って自転します。
これには jquery 回転プラグイン ( 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;}
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
});
}
};