jquery animate 不会触发答案

【问题标题】：jquery animate doesn't firejquery animate 不会触发
【发布时间】：2026-01-08 14:40:02
【问题描述】：

<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 中是一样的。

为什么会这样 >??

【问题讨论】：

标签： jquery jquery-animate opacity

【解决方案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>

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

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

    <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>

【讨论】：

完全一样的结果..第一次动画很好，第二次它不会动画，只是快速改变图像。
我明白你的意思。不透明度是 0 到 1 的比例，而不是 0 到 100。它正在为它设置动画，但它在 1 1/100 的过程中完全不透明。我已经修复了我的两个代码示例。

【解决方案2】：

我无法获得您在 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");

【讨论】：