Question

为我想要达到的目标而努力：http://jsfiddle.net/g3qgS/1/

太阳的图像从底部升起然后使用jquery旋转，它旋转到360度。这两个动画在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           
        });
    }

};

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

jQueryRotate - IE8中的问题

2 个答案: