0

私が達成したいことのための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           
        });
    }

};
4

2 に答える 2