Javascript 淡入动画在 Firefox 或 Chrome 中不起作用答案

【问题标题】：Javascript fade in animation not working in Firefox or ChromeJavascript 淡入动画在 Firefox 或 Chrome 中不起作用
【发布时间】：2016-07-03 07:09:18
【问题描述】：

我正在尝试设置一个图片库，以便图像仅在您滚动它们时淡入，并且仅在整个图像在屏幕上可见时淡入。

我在 Microsoft Edge 浏览器上工作时获得了预期的效果，但在 Firefox 或 Chrome 中似乎不起作用。图像不会淡入，当图像到达屏幕底部时它们开始出现。我唯一的猜测是javascript有问题。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

基本问题在于处理条件的方式以及如何计算 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();

并且条件可以扩展为

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

完整的codepen可以在here找到

【讨论】：

添加更改后，恐怕问题仍然存在。您是否尝试在 Firefox 和 Chrome 上对其进行测试并查看它是否有效？
是的，我是用 chrome 开发的。您能否更具体地说明您目前遇到的问题？
和以前一样的问题，表格行中的图像只有在您向下滚动时整行可见时才会淡入。现在，当行的顶部出现在屏幕上时，它们开始出现。
哦，我明白你的意思了。现在试试看codepen.io/pghiran/pen/qNmZXq
它似乎对我有用。还是仅在整个表格行（包括填充）可见时才显示图像？