无法使js fadeIn（）工作

Question

试图弄清楚当我滚动到页面底部时如何使用fadeIn（）函数。 如今，这似乎是一种相当普遍的技术，我想使用它。 我的代码如下，但是我找不到找到淡入图像的方法。

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
      }

    } 
  });
});

Answer 1

我认为您的第一个问题是滚动到页面底部的检测方式。 看看这个。

Javascript：如何检测浏览器窗口是否滚动到底部？

我已经更新了您的代码以进行演示。

jsFiddle演示，不带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>');
        }
    } 
});

您提到在问题中使用fadeIn（）。 这是将代码更新为使用fadeIn（）的演示

jsFiddle演示与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();
        }
    } 
});

Answer 2

您正在尝试以其他方式进行操作，确实人们在加载图像，但是他们将其隐藏并显示在滚动条上，以最大程度地减少页面加载时间

我给你一个小提琴，我通过谷歌搜索发现了

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> 

发生的事情是它们只是在加载时保持隐藏状态，并且在滚动条上可见内容。