jqueryのアニメーションは発生しません。

StackOverflow https://stackoverflow.com/questions/939485

  •  06-09-2019
  •  | 
  •  

質問 

<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で同じである..

これはなぜ??>である

役に立ちましたか？

解決

あなたの本当の問題は、不透明度は、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>

他のヒント

私はあなたは、Firefox 3.0.10 Ubuntuで記述し、同じ結果を得ることができなかった、Animate_2が正常に動作するようです。最初に私はあなたがローカルファイルを使用しての代わりに、（Apacheのような）ローカルホストサーバーを介してページを実行しているが、それは私のために結果を変更していない可能性がありますので、それはあるかもしれないと思ったが、私は、Windowsプラットフォーム上で作業で問題を覚えています過去には。私はまた、次のプリロードスクリプトでそれを試みたが、それは私のマシン上で最初のアニメーションスタッターを削除するように見えるん：

jQuery.preloadImages = function()
                {
                  for(var i = 0; i").attr("src", arguments[i]);
                    }
                }
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top