jqueryのアニメーションは

<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のアニメーションは

なぜこれは？>

出典

2009-06-02 Anonymous

あなたの本当の問題は、不透明度が100まで0〜1の規模ではなく、0であるということです。しかし、ここでいくつかのわずかな改善点は次のとおりです。

あなただけの一枚の画像を持っているとして、あなたはあまりにもコードをたくさん簡素化することができ別のものの上に。

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

出典

2009-06-02 13:29:28 Oli

同じ結果...まずアニメイトで結構です、二回目は、それだけですぐにアニメーションではなくなりますイメージを変更します。 –

私はあなたが何を意味するかを見ます。不透明度は、0〜100の尺度ではなく、0〜1の尺度です。アニメーション化していましたが、1/100の途中で完全に不透明でした。私は両方のコードサンプルを修正しました。 – Oli

それでした！ありがとうたくさん...後で私がとても愚かな気分になる。 –

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

 
jQuery.preloadImages = function() 
       { 
        for(var i = 0; i").attr("src", arguments[i]); 
        } 
       } 
$.preloadImages("imgages/bg1.jpg", "imgages/bg2.jpg");

出典

2009-06-02 14:42:09 user105090

jqueryのアニメーションは

答えて

関連する問題