Question

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

Warning messages:
1: In mean.default(X[[i]], ...) :
  argument is not numeric or logical: returning NA
2: In mean.default(X[[i]], ...) :
  argument is not numeric or logical: returning NA

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

可在此JS Fiddle找到在项目中我也使用了

的javascript代码

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

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

问题：由于整页代码，淡入功能不会进入滚动条件。

Answer 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，而是内部的div，因为有多个”，我们需要做的就是要将此行$(this).fadeOut(0);更改为此$(this).children().fadeOut(0);，然后将此行更改为：

$('#sec-' + nextSlide).fadeIn();到此$('#sec-' + nextSlide).children().fadeIn(1500);

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

JS Fiddle 2

Answer 2

当使用fullPage.js scroll事件甚至没有被解雇时，我很惊讶以前的答案得到了如此多的赞成：D

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

如果您仍希望在从一个部分更改为另一个部分时使用淡化效果，则正确的解决方案是使用fullPage.js callbacks或fullpage.js state classes来触发动画。这可以使用javascript或plain css 3来完成。

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

使用javascript在html中淡入div

2 个答案:

----------