CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kotosif
Kotosif

Reputation: 353

Javascript fade in animation not working in Firefox or Chrome

I'm trying to set up a image gallery so that images only fade in when you scroll over them, and only fades in when the whole image is visible on the screen.

I've got the desired effect working on the Microsoft Edge browser but it doesn't seem to work in Firefox or Chrome. The images don't fade in, and they start appearing when the image reaches the bottom of the screen. My only guess is there's something wrong with the 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>

Upvotes: 1

Views: 379

Answers (1)

Paul Ghiran
Paul Ghiran

Reputation: 1233

The basic problems lie in the way your conditions are handled and how you calculate your bottom_of_window object (.height() gives you the whole height of the document). I used window.innerHeight (this is just plain JS) because jQuery's way of handling it sometimes gives back eroneous answers.
Here's how I suggest using the positions used for calculating:

 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();

And the condition can be extended to 

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

The full codepen can be found here

Upvotes: 3

Related Questions