Question

基本上，我想要发生的是一类在滚动时淡入/淡出的div。它似乎在这个jsfiddle页面上完美运行。

我对代码所做的唯一更改是添加此插件，但它似乎仍然不起作用，并且帖子只是不可见：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

我可能使用了错误的插件吗？

Answer 1

您是否包含JavasScript？

＆＃13;

$(window).on("load",function() {
    function fade() {
        $('.fade').each(function() {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top + $(this).outerHeight();
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
            
            /* If the object is completely visible in the window, fade it in */
            if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
            } else { //object goes out of view (scrolling up)
                if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
            }
        });
    }
    fade(); //Fade in completely visible elements during page-load
    $(window).scroll(function() {fade();}); //Fade in elements during scroll
});

＆＃13;

你是否在加载jQuery后调用脚本？
您是否包含CSS？

＆＃13;

.fade {
    margin: 50px;
    padding: 50px;
    background-color: lightgreen;
    opacity: 0;
}

＆＃13;

您是否包含HTML？

＆＃13;

<div>
    <div class="fade">Fade In 01</div>
    <div class="fade">Fade In 02</div>
    <div class="fade">Fade In 03</div>
    <div class="fade">Fade In 04</div>
    <div class="fade">Fade In 05</div>
    <div class="fade">Fade In 06</div>
    <div class="fade">Fade In 07</div>
    <div class="fade">Fade In 08</div>
    <div class="fade">Fade In 09</div>
    <div class="fade">Fade In 10</div>
</div>

＆＃13;

你做过HTML5吗？

以下是使其正常运行的完整代码。

＆＃13;

$(window).on("load",function() {
    function fade() {
        $('.fade').each(function() {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top + $(this).outerHeight();
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();
            
            /* If the object is completely visible in the window, fade it in */
            if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
            } else { //object goes out of view (scrolling up)
                if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
            }
        });
    }
    fade(); //Fade in completely visible elements during page-load
    $(window).scroll(function() {fade();}); //Fade in elements during scroll
});

＆＃13;

.fade {
    margin: 50px;
    padding: 50px;
    background-color: lightgreen;
    opacity: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
    <div class="fade">Fade In 01</div>
    <div class="fade">Fade In 02</div>
    <div class="fade">Fade In 03</div>
    <div class="fade">Fade In 04</div>
    <div class="fade">Fade In 05</div>
    <div class="fade">Fade In 06</div>
    <div class="fade">Fade In 07</div>
    <div class="fade">Fade In 08</div>
    <div class="fade">Fade In 09</div>
    <div class="fade">Fade In 10</div>
</div>

＆＃13;

Answer 2

在头部包含jquery源文件，你必须先加载jquery文件。

<head><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script></head>

您必须在运行代码片段之前加载jquery

$(window).on("load",function() {
    function fade() {
        $('.fade').each(function() {
            /* Check the location of each desired element */
            var objectBottom = $(this).offset().top + $(this).outerHeight();
            var windowBottom = $(window).scrollTop() + $(window).innerHeight();

            /* If the object is completely visible in the window, fade it in */
            if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                if ($(this).css('opacity')==0) {$(this).fadeTo(500,1);}
            } else { //object goes out of view (scrolling up)
                if ($(this).css('opacity')==1) {$(this).fadeTo(500,0);}
            }
        });
    }
    fade(); //Fade in completely visible elements during page-load
    $(window).scroll(function() {fade();}); //Fade in elements during scroll
});

滚动div上的淡入/淡出是不可见的

2 个答案: