1 
<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_1() 工作正常，但 Animate_2() 只会显示 bg2.jpg 而不会为不透明度设置动画。这在 IE 和 Firefox 中是一样的。

为什么会这样>？？

4

2 回答 2

1

您真正的问题是不透明度是 0 到 1 的比例，而不是 0 到 100。但这里有一些轻微的改进：

您也可以大大简化代码，因为您刚刚将一个图像放在另一个图像之上。

    <script type="text/javascript">
        var shown = true;

        function toggleFront() {
            shown = !shown;
            $("div#bg1").animate({opacity: shown*1}, 200);
            window.setTimeout(toggleFront, 1000);
        }

        $(function() {
            /* Start cycle */
            window.setTimeout(toggleFront, 500);
        });
    </script>

我弄乱了你的时间值以更快地显示它。

或者修复它。你需要window.在 setTimeout 之前。简单的修复。

    <script type="text/javascript">
        function Animate_2() 
        {
            $("div#bg1").animate({opacity: 1}, 2000);
            $("div#bg2").animate({opacity: 0  }, 2000);
            window.setTimeout(Animate_1, 5000);
        }

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

        $(function()
        {
            /* Start cycle */
            window.setTimeout(Animate_1, 5000);
        });
    </script>
于 2009-06-02T13:29:28.610 回答
0

我无法获得您在 Firefox 3.0.10 Ubuntu 上描述的相同结果，Animate_2似乎工作正常。起初我认为这可能是因为您可能使用本地文件而不是通过 localhost 服务器（如 apache）运行您的页面，但这并没有改变我的结果，但我记得在 Windows 平台上工作的问题在过去。我还使用以下预加载脚本进行了尝试，这似乎确实消除了我机器上的初始动画卡顿：

jQuery.preloadImages = 函数（）
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
于 2009-06-02T14:42:09.883 回答