FirefoxやChromeでアニメーションのJavascriptがフェードアウトしない

画像ギャラリーをスクロールすると画像がぼやけてしまい、画像全体が画面に表示されたときにフェードインするように設定しようとしています。FirefoxやChromeでアニメーションのJavascriptがフェードアウトしない

私はMicrosoft Edgeブラウザでの作業には効果がありますが、FirefoxやChromeでは動作しません。画像はフェードインしないで、画像が画面の下部に達すると表示されます。私の唯一の推測はジャバスクリプトに何か問題があることです。

<html> 
<head> 
    <style> 
     table, td 
     { 
      border: 0px solid black; 
      border-collapse: none; 
     } 

     td 
     { 
      height: 500px; 
      width: 500px; 
     } 

     img 
     { 
      <!--Make images fit to table cell */ --> 
      height:auto; 
      width: 100%; 
     } 

     .hidden 
     { 
      opacity:0; 
     } 

    </style> 
    <script src="jquery-3.0.0.min.js"></script> 
</head> 
<body> 
    <table style="width:980px"> 
     <tr> 
      <td><div class="hidden"><a href="Gallery\erza_hakama.png"><img src="Gallery\erza_hakama.png" width="auto" alt="Erza in hakama"></a></div></td> 
      <td><div class="hidden"><a href="Gallery\erza_hakama2.png"><img src="Gallery\erza_hakama2.png" width="auto" alt="Erza in hakama"></a></div></td> 
      <td><div class="hidden"><a href="Gallery\erza_hk_armour.png"><img src="Gallery\erza_hk_armour.png" width="auto" alt="Erza in heart kreuz armour"></a></div></td> 
     </tr> 
     <tr> 

       <td><div class="hidden"><a href="Gallery\Chapter 441 Caracolle Island.png"><img src="Gallery\Chapter 441 Caracolle Island.png" width="auto" alt="Chapter 441 Caracolle Island"></a></div></td> 
       <td><div class="hidden"><a href="Gallery\erza hakama gi mashima twitter art.jpg"><img src="Gallery\erza hakama gi mashima twitter art.jpg" width="auto" alt="erza hakama gi mashima twitter art"></div></a></td> 
       <td><div class="hidden"><a href="Gallery\Erza valentine chocolate.jpg"><img src="Gallery\Erza valentine chocolate.jpg" width="auto" alt="Erza valentine chocolate"></div></a></td> 

     </tr> 
     <tr> 

       <td><div class="hidden"><a href="Gallery\erza_render_by_edicionesnicorobin-d8y4rci.png"><img src="Gallery\erza_render_by_edicionesnicorobin-d8y4rci.png" width="auto" alt="Erza cute close up"></a></div></td> 
       <td><div class="hidden"><a href="Gallery\erza_seventh_guild_master.jpg"><img src="Gallery\erza_seventh_guild_master.jpg" width="auto" alt="Erza seventh guild master"></div></a></td> 
       <td><div class="hidden"><a href="Gallery\gmg_yukata.jpg"><img src="Gallery\gmg_yukata.jpg" width="auto" alt="Grand Magic Games dress"></div><a></td> 

     </tr> 
    </table> 

    <script> 
     // if the image in the window of browser when the page is loaded, show that image 
     $(document).ready(function(){ 
      showImages('.hidden'); 
     }); 

     /* Every time the window is scrolled ... */ 
     $(window).scroll(function(){ 
      showImages('.hidden'); 
     });    

     /* Check the location of each desired element */ 
     function showImages(el) { 
      $(el).each(function(i){ 

       var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
       var bottom_of_window = $(window).scrollTop() + $(window).height(); 

       /* If the object is completely visible in the window, fade it it */ 
       if(bottom_of_window > bottom_of_object){ 

        $(this).animate({'opacity':'1'},500); 

       } 

      }); 
     } 


    </script> 
</body> 

</html>

出典

2016-07-02 Kotosif

基本的な問題は、あなたの条件の処理方法にあると、あなたのbottom_of_windowオブジェクトの計算方法（（）.heightをあなたの文書の全体の高さを示します）。私はwindow.innerHeightを使用しました（これは単なるプレーンなJSです）。jQueryの処理方法は時々不快な応答を返すためです。
は、ここで私が計算するために使用される位置を使用することをお勧め方法は次のとおりです。

var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
var bottom_of_window = $(window).scrollTop() + window.innerHeight; 
var top_of_object = $(this).offset().top; 
var top_of_window = $(window).scrollTop();

、条件が完全なcodepenがhere

出典

2016-07-02 23:09:18

を見つけることができます

if (bottom_of_window > bottom_of_object && top_of_object > top_of_window && top_of_object < bottom_of_window)

に拡張することができ、私は問題が怖いです変更を加えた後も引き続き維持されます。 FirefoxとChromeでテストしてみましたか？ – Kotosif

はい、私はそれをクロームで開発しました。あなたは今何の問題を見ているのか少し具体的になりますか？ –

前と同じ問題です。表の行内のイメージは、スクロールするときに行全体が表示されたときにフェードインされることを意味します。今は、行の先頭が画面に表示されるときに表示されます。 – Kotosif

FirefoxやChromeでアニメーションのJavascriptがフェードアウトしない

答えて

関連する問題