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

0

Firefox 3.0.10 Ubuntu で説明したのと同じ結果を得ることができませんでしたが、うまくいくAnimate_2ようです。最初は、localhost サーバー (Apache など) を介してページを実行するのではなく、ローカル ファイルを使用している可能性があると考えていましたが、結果は変わりませんでしたが、Windows プラットフォームでの動作に問題があったことを覚えています。過去に。また、次のプリロード スクリプトを使用して試してみましたが、マシンの最初のアニメーションのスタッターが削除されたようです。

jQuery.preloadImages = 関数()
                {
                  for(var i = 0; i").attr("src", 引数[i]);
                    }
                }
$.preloadImages("画像/bg1.jpg", "画像/bg2.jpg");
于 2009-06-02T14:42:09.883 に答える