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: How to detect if browser window is scrolled to bottom?

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

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>');
        }
    } 
});

你提到在问题中使用fadeIn（）。以下是使用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();
        }
    } 
});

Answer 2

你以不同的方式尝试它确实人们在加载时会有图像，但是它们正在隐藏它并在滚动条上显示它以最小化页面加载时间

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

jsfiddle.net/tcloninger/e5qaD /

＆＃13;

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

＆＃13;

#container
{
    height:2000px;    
}

#container DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:lightgreen; 
}

.hideme
{
    opacity:0;
}

＆＃13;

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

＆＃13;

发生了什么事情，他们只是隐藏在加载和滚动上，内容是可见的。

无法让js fadeIn（）工作

2 个答案: