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

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

jquery browser

jQuery/JS动画搞砸了（Firefox/IE）,jquery,browser,Jquery,Browser,编辑：这个问题似乎不仅仅局限于IE，请参阅下面我的答案帖子中的测试用例您好，我正在徽标上的3个不同背景图像之间旋转： $(function() { function Animate_2() { $("div#bg1" ).animate({opacity: 0 }, 2000); $("div#bg2").animate({opacity: 100}, 2000); setTimeout(Animate_3, 5000);

编辑：

这个问题似乎不仅仅局限于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和Opera中都可以正常工作

在IE中，图像确实发生了变化，但没有适当地淡出/淡入

当通过IETester运行它时，我不断地得到小时刻度光标，就好像它正在动态下载背景图像一样

有人能帮我吗？

我现在已经成功地在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>


分区bg1{
高度：159px；
宽度：800px；
左边距：自动；
右边距：自动；
背景图片：url（'images/bg1.jpg'）；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
z指数：3；
}
分区bg2{
高度：159px；
宽度：800px；
左边距：自动；
右边距：自动；
背景图片：url（'images/bg2.jpg'）；
背景重复：无重复；
背景位置：中心；
位置：相对位置；
z指数：2；
利润上限：-159px；
}
函数Animate_2（）
{
$（“div#bg1”）。动画（{opacity:100}，2000）；
$（“div#bg2”）。动画（{opacity:0}，2000）；
设置超时（动画设置为1，5000）；
}
函数Animate_1（）
{
$（“div#bg1”）。动画（{opacity:0}，2000）；
$（“div#bg2”）。动画（{opacity:100}，2000）；
设置超时（动画设置2，5000）；
}
$（函数（）
{
/*启动周期*/
设置超时（动画设置为1，5000）；
});

刚开始设置动画时一切都很好，但它只是在animate_2（）处更改图像（没有动画！）

您可能想尝试以下方法：`

        $(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的一个特点是可以链接内容。我认为这样做最不复杂，也更容易理解和调试。

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