jQueryRotate - 问题在IE8 [英] jQueryRotate - Issue in IE8

问题描述

JS捣鼓什么，我想要实现： http://jsfiddle.net/g3qgS/1/

阳光的形象从底部上升，然后使用jquery旋转，其旋转至360度。这两个动画铬，FF，IE9，但不是在IE8运行正常。

在IE8，太阳会从底部上升，直到它应该的位置，然后转动前，又回到原来的位置和旋转。

我使用jquery旋转插件（ HTTP：//$c$c.google。 COM / p / jqueryrotate / ）对于这一点，我知道这也可以通过CSS3做，但我需要它的IE8为好，因此不得不走这条路。

这是为什么在IE8其行为怪异将AP preciated任何帮助。事实上，如果有另一种方式来做到这些动画，会很高兴知道，只要他们在IE8中正常工作。谢谢你。

HTML

 ＆LT; D​​IV CLASS =续＆GT;
    ＆LT; IMG SRC =htt​​p://s22.postimg.org/fjo3h0p2l/sun.png级=太阳/＆GT;
＆LT; / DIV＆GT;
 

CSS：

  .cont {背景：＃000;高度：345px;位置：相对;}
。孙{立场：绝对的;底部：0像素;左：20像素;}
 

JS：

  $（窗口）.load（函数（）{
    HomePageAnimation.sunRise（）;
}）;
VAR HomePageAnimation = {    日出：功能（）{
        $（太阳）动画（
        {底：150像素}，
        {工期：2000年，
            完成：功能（）{HomePageAnimation.rotateSun（360）}
        }）;
    }，    rotateSun：功能（角）{
        VAR太阳= $（太阳）
        sun.rotate（{
            角度：90，
            animateTo：360
        }）;
    }};
 

解决方案

修改

 日出：功能（）{
    $（太阳），旋转（0）;
 

这样：

 日出：功能（）{
    $（太阳），旋转（0）;
    $（太阳）动画（
 

它应该工作，我希望。

js fiddle for what I want to achieve : http://jsfiddle.net/g3qgS/1/

The image of sun rises from bottom and then using jquery rotate, its being rotated till 360 degrees. These 2 animations run fine in chrome, FF, IE9 but not in IE8.

In IE8, the sun will rise from bottom till the point where it is supposed to , then before the rotation, it comes back to its original position and rotates.

I am using jquery rotate plugin (http://code.google.com/p/jqueryrotate/) for this, I know this can also be done through css3, but I needed it for IE8 as well, hence had to go this way.

Any help on why its behaving weird in IE8 would be appreciated. In fact, if there's another way to do these animations, would be glad to know, provided they work in IE8 as well. Thank you.

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

};

解决方案

Change

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

to this:

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

It should work I hope.

这篇关于jQueryRotate - 问题在IE8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！