Question

编辑：

问题似乎不仅限于IE，请参阅下面的答案，以获取测试用例。

您好，我在徽标上的3个不同背景图片之间旋转：

$(function() {

    function Animate_2() {

        $("div#bg1" ).animate({opacity: 0 }, 2000);
        $("div#bg2").animate({opacity: 100}, 2000);

        setTimeout(Animate_3, 5000);

    }

    function Animate_3() {

        $("div#bg2").animate({opacity: 0  }, 2000);
        $("div#bg3").animate({opacity: 100}, 2000);

        setTimeout(Animate_1, 5000);

    }

    function Animate_1() {

        $("div#bg3").animate({opacity: 0  }, 2000);
        $("div#bg1").animate({opacity: 100}, 2000);

        setTimeout(Animate_2, 5000);

    }

    /* Start it */
    setTimeout(Animate_2, 5000);

});

bg1到bg3具有以下样式：

div#bg1 {
    height:             159px;
    width:              800px;
    margin-left:        auto;
    margin-right:       auto;
    background-image:   url('images/bg_1.jpg');
    background-repeat:  no-repeat;
    background-position:center center;
    position:           relative;
    z-index:            3;
}


div#bg2 {
    height:             159px;
    width:              800px;
    margin-left:        auto;
    margin-right:       auto;
    background-image:   url('images/bg_2.jpg');
    background-repeat:  no-repeat;
    background-position:center center;
    position:           relative;
    z-index:            2;
    margin-top:         -159px;
}

div#bg3 {
    height:             159px;
    width:              800px;
    margin-left:        auto;
    margin-right:       auto;
    background-image:   url('images/bg_3.jpg');
    background-repeat:  no-repeat;
    background-position:center center;
    position:           relative;
    z-index:            1;
    margin-top:         -159px;
}

IE对第一个动画做得很好，bg1很好地淡出而bg2淡入...在第一次完美转换后，它在IE（所有版本！）中搞砸了，而它在Firefox，Chrome，Safari中运行良好和歌剧。

在IE中，图像确实发生了变化，但它没有正确淡出/中...

当通过IETester运行时，我不断得到小时玻璃光标，好像它正在下载背景图像......

任何人都可以帮我吗？

Answer 1

您可能想尝试这样的事情：`

        $(function()
        {setTimeout(dostuff, 1000);});
         function dostuff(){
  $("div#bg1").animate({opacity: 100}, 1000).animate({opacity: 100}, 1000).animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000);
  $("div#bg2").animate({opacity: 0}, 1000).animate({opacity: 0}, 1000).animate({opacity: 100}, 1000).animate({opacity:100}, 1000).animate({opacity: 0}, 1000);dostuff()}

`

关于jquery的一个问题是你可以链接东西。这样做是为了避免复杂，我认为更容易遵循和调试。

Answer 2

我现在已经设法在Firefox上产生这种行为，代码如下：

<html>
    <head>
        <style type="text/css">
            div#bg1 {
                height:             159px;
                width:              800px;
                margin-left:        auto;
                margin-right:       auto;
                background-image:   url('images/bg1.jpg');
                background-repeat:  no-repeat;
                background-position:center center;
                position:           relative;
                z-index:            3;
            }
            div#bg2 {
                height:             159px;
                width:              800px;
                margin-left:        auto;
                margin-right:       auto;
                background-image:   url('images/bg2.jpg');
                background-repeat:  no-repeat;
                background-position:center center;
                position:           relative;
                z-index:            2;
                margin-top:         -159px;
            }
        </style>
        <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            function Animate_2() 
            {
                $("div#bg1").animate({opacity: 100}, 2000);
                $("div#bg2").animate({opacity: 0  }, 2000);
                setTimeout(Animate_1, 5000);
            }

            function Animate_1() 
            {
                $("div#bg1").animate({opacity: 0  }, 2000);
                $("div#bg2").animate({opacity: 100}, 2000);
                setTimeout(Animate_2, 5000);
            }

            $(function()
            {
                /* Start cycle */
                setTimeout(Animate_1, 5000);
            });
        </script>
    </head>
    <body>
        <div id="bg1"></div>
        <div id="bg2"></div>
    </body>
</html>

一开始动画时一切都很好，但它只是在animate_2（）中改变了图像（没有动画！）......

jQuery / JS动画搞砸了（Firefox / IE）

2 个答案: