0

js fiddle 为我想要实现的目标：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

1

改变

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

对此：

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

我希望它应该工作。

于 2013-10-09T13:01:25.143 回答
0

我会尝试将图像包装在自己的容器中：

<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 中发生了什么，但希望这会有所帮助

于 2013-10-03T17:43:09.360 回答