使用javascript淡入html中的div答案

【问题标题】：Fading in divs in html using javascript使用javascript淡入html中的div
【发布时间】：2016-04-05 11:01:12
【问题描述】：

在我的项目中，我想淡入 html 中的 div，我正在使用以下代码

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

#container {
    height:2000px;    
}

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

.hideme {
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/g/jquery.fullpage@2.5.9(jquery.fullPage.min.js+vendors/jquery.easings.min.js+vendors/jquery.slimscroll.min.js)"></script>
<link href="https://cdn.jsdelivr.net/jquery.fullpage/2.5.9/jquery.fullPage.min.css" rel="stylesheet" />
<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>

可以在JS Fiddle找到在项目中，我还使用了 javascript 代码

$(document).ready(function() {
    $('#fullpage').fullpage();
});

这基本上使滚动更好，详情https://github.com/alvarotrigo/fullPage.js/

问题：由于全页代码淡入功能没有进入scroll if条件。

【问题讨论】：

你的 javascript 中有两个 $(document).ready() 用于同一页面吗？
@Glubus 没关系。
也许你应该使用$(this).fadeIn();
@PraveenKumar 你说得对，虽然我不确定，但事实并非如此。
@AnasSaeed 类似stackoverflow.com/questions/33327255/…

标签： javascript jquery html fullpage.js

【解决方案1】：

我认为您正在寻找类似JS Fiddle 1

JS：

//initialize
var winHeight = $(window).height(),
  sections = $('.sections'),
  currentSlide = 0;
$('html, body').animate({scrollTop: 0}, 0);

//hide elements not in the view as the page load for the first time
sections.each(function() {
  if ($(this).offset().top > winHeight - 5) {
    $(this).fadeOut(0);
  }
});

//show elements on scroll
$(window).scroll(function(event) {

  // retrieve the window scroll position, and fade in the 2nd next section 
  // that its offset top value is less than the scroll
  scrollPos = $(window).scrollTop();
  if (scrollPos >= currentSlide * winHeight) {
    nextSlide = currentSlide + 2;
    $('#sec-' + nextSlide).fadeIn();

    // as long as current slide is still in range of the number of sections
    // we increase it by one. 
    if (currentSlide <= sections.length) {
      currentSlide++;
    }
  }
});

---------

更新：

根据 OP 的评论“我希望部分中的 div 在滚动时淡入，而不是部分 div 而是其中的那些，因为有多个”，我们需要做的就是将此行 $(this).fadeOut(0); 更改为此 $(this).children().fadeOut(0); 然后此行：

$('#sec-' + nextSlide).fadeIn(); 给这个$('#sec-' + nextSlide).children().fadeIn(1500);

现在，我们正在淡入和淡出该部分的所有子项，而不是部分本身。

JS Fiddle 2

【讨论】：

感谢您的代码，但我希望部分内的 div 在滚动时淡入，而不是部分 div 而是其中的那些，因为有多个。
@AnasSaeed，它是相同的技术，但不是在节中淡出和淡出，而是使用.children()，以便将这些效果应用于节的子级，请检查更新部分我的回答

【解决方案2】：

当scroll 事件在使用 fullPage.js 时甚至没有被触发时，我很惊讶之前的答案得到了如此多的支持：D

fullPage.js FAQs 中详细说明了您的问题的解决方案。这基本上是使用 fullPage.js 选项scrollbar:true 或autoScrolling:false。这样滚动事件就会被触发。

如果您在从一个部分切换到另一个部分时仍想使用淡入淡出效果，正确的解决方案是使用fullPage.js callbacks 或fullpage.js state classes 来触发动画。这可以使用 javascript 或纯 css 3 来完成。

查看一个示例，了解如何结合使用 css3 动画与 this video tutorial 上的 fullpage.js 状态类。

【讨论】：