jQuery / JS 动画搞砸了 (Firefox/IE)答案

【问题标题】：jQuery / JS animation screwed up (Firefox/IE)jQuery / JS 动画搞砸了 (Firefox/IE)
【发布时间】：2009-06-02 06:53:47
【问题描述】：

编辑：

问题似乎不仅限于 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 运行它时，我不断得到沙漏光标，就好像它正在动态下载背景图像......

谁能帮我解决这个问题？

【问题讨论】：

你所说的“它搞砸了”是什么意思？动画会停止，还是出现其他问题？
图像确实发生了变化，但没有正确淡出/淡入
你能检查一下当你开始使用 Animate_3() 而不是 Animate_2() 时会发生什么？
我有一个只有 2 张图像的测试用例，它应该做完全相同的事情（只是翻转），但他们没有。

标签： jquery browser

【解决方案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 的一件事是你可以链接东西。我认为这样做最简单，更容易理解和调试。

【讨论】：

【解决方案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() 处改变了图像（没有动画！）......

【讨论】：