Can't get js fadeIn() to work

Question

Trying to figure out how I use the fadeIn() function when I scroll to the bottom of the page. It seems to be a reasonably common technique these days and I'd like to use it. My code is as follows, but I can't find a way to get the images to fade in.

var c = 0;

$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {

      c = c + 1;

      if (c <= 7) {
        $('#intro').html($('#intro').html() + '<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />');
      } else if (c == 8) {
        $('#intro').html($('#intro').html() + '<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>');
      } else {
        // do nothing
      }

    } 
  });
});

Okay, first: it's highly unlikely that `$(window).scrollTop() == $(document).height() - $(window).height()` would evaluate to true often. Use `>=` instead of `==`. Second: to make the actual fade effect you should separate the added content somehow - for example, by giving the top element a class that's initially hidden, and then fade it in. — Shomz, Dec 01 '14 at 13:36

score 2 · Accepted Answer · edited May 23 '17 at 12:33

I think your first issue is the way you are detecting having scrolled to the bottom of the page. Have a look at this.

Javascript: How to detect if browser window is scrolled to bottom?

I've updated your code to demonstrate.

jsFiddle demo without fadeIn()

var c = 0;

$(window).scroll(function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        c++;
        if (c <= 7) {
            $('#intro').html($('#intro').html() + '<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />');
        } else if (c == 8) {
            $('#intro').html($('#intro').html() + '<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>');
        }
    } 
});

You mention using fadeIn() in the question. Here's a demo of your code updated to use fadeIn()

jsFiddle Demo with fadeIn()

var c = 0;

$(window).scroll(function() {
    if((window.innerHeight + window.scrollY) >= document.body.offsetHeight){
        c++;
        if (c <= 7) {
            var el = $('<ul><li><a target="_blank" href="http://mywebsite.com"><img src="images/filler.png" alt="" />Count = ' + c + '&raquo;</a></li></ul><br class="clear" />').hide().appendTo('#intro').fadeIn();
        } else if (c == 8) {
            var el = $('<br /><p><a target="_blank" href="example_page.html">Search historical stories</a></p>').hide().appendTo('#intro').fadeIn();
        }
    } 
});

score 1 · Answer 2 · answered Dec 01 '14 at 13:16

You're trying it in a different way indeed people have images on load but they are hiding it and showing it on the scroll to minimize the page load time

I'm giving you one fiddle which I found by googling

jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() {
    
    /* Every time the window is scrolled ... */
    $(window).scroll( function(){
    
        /* Check the location of each desired element */
        $('.hideme').each( function(i){
            
            var bottom_of_object = $(this).position().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);
                    
            }
            
        }); 
    
    });
    
});

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
    
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    <div class="hideme">Fade In</div>
    
</div>

What happening is they're just stay as hidden on load and on the scroll the content is visible.

Can't get js fadeIn() to work

2 Answers2