除了第一篇博文之外，所有博客文章都应该在滚动时淡入

Question

第一篇博文应显示，然后其他人将在您向下滚动时淡入。在主页上，第一个不会显示，直到我滚动 - 这是我不想要的。我的代码如下，包括用于显示第一篇博文的css：

function sectionFadeIn() {
$('.fadein').each(function() {
    var top_of_object = $(this).offset().top + 50;
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (bottom_of_window > top_of_object) {
        $(this).animate({ 'opacity': '1'}, 1000);
     }
})

}

我的CSS：

.fadein {
    opacity: 0;
  }

  .fadein:first-of-type {
    opacity: 1;
  }

网站：tazkhatri.com

Answer 1

你可以使用

xf = ncread('Temperature.nc','x'); %f stands for "filtered"
xf = ncread('Temperature.nc','x'); %f stands for "filtered"
yf = ncread('Temperature.nc','y');
crsf= ncread('Temperature.nc','crs');
lonf = ncread('Temperature.nc','lon');
latf = ncread('Temperature.nc','lat');
tmpf=zeros(300);

for i = 1:300
    for j = 1:300
        tempf = ncread('Temperature.nc','Temperature',[i j 1], [1 1 8760]);
        tmpf(i,j)= mean(tempf); % Average of 8760 elements
    end
end

%New nc file and variables creation
nccreate('tmpfiltered.nc','xf','Datatype','single','Dimensions', {'x',300});
ncwrite('tmpfiltered.nc','xf',xf); % writing x
ncwriteatt('tmpfiltered.nc','xf','long_name','x-coordinate');
ncwriteatt('tmpfiltered.nc','xf','standard_name','projection_x_coordinate');
ncwriteatt('tmpfiltered.nc','xf','units','m');
ncwriteatt('tmpfiltered.nc','xf','axis','X');
ncwriteatt('tmpfiltered.nc','xf','valid_min',-20000000);
ncwriteatt('tmpfiltered.nc','xf','valid_max',20000000);
ncwriteatt('tmpfiltered.nc','xf','grid_mapping','crs');

% y variable
nccreate('tmpfiltered.nc','yf','Datatype','single','Dimensions',{'y',300});
ncwrite('tmpfiltered.nc','yf',yf);
ncwriteatt('tmpfiltered.nc','yf','long_name','y-coordinate');
ncwriteatt('tmpfiltered.nc','yf','standard_name','projection_y_coordinate');
ncwriteatt('tmpfiltered.nc','yf','units','m');
ncwriteatt('tmpfiltered.nc','yf','axis','Y');
ncwriteatt('tmpfiltered.nc','yf','valid_min',-20000000);
ncwriteatt('tmpfiltered.nc','yf','valid_max',20000000);
ncwriteatt('tmpfiltered.nc','yf','grid_mapping','crs');

更新：刚发现您的实时代码链接。

上述代码无效，因为.fadein元素不是所有子元素。请参阅此文章，了解如何定位除该元素的第一个实例之外的所有元素。 jQuery select all except first

Answer 2

原始帖子中的代码可能已经过简化，但sectionFadeIn函数需要在$(window).scroll()回调中，例如：

function sectionFadeIn() {
  $('.fadein').each(function() {
    var top_of_object = $(this).offset().top + 50;
    var bottom_of_window = $(window).scrollTop() + $(window).height();
    if (bottom_of_window > top_of_object) {
      $(this).animate({ 'opacity': '1'}, 1000);
    }
  })
}

$(window).scroll(function(){
  sectionFadeIn();
});

但是，我认为我们可以通过让CSS处理opacity动画来简化这一过程。以下是我们如何做到这一点：

1. 我们将使用一个简单的油门来阻止每个小滚动触发功能。
2. 找到隐藏的元素，计算他们的位置
3. 如果位置位于窗口底部之上，请添加visible类
4. 设置CSS以设置元素的不透明度的动画
＆＃13;
＆＃13;
var scrollWait = false;

$(window).scroll(function() {
  if (!scrollWait) {
    scrollWait = true;
    var hidden = $('.fadein:not(.visible)');
    var windowBottom = $(window).scrollTop() + $(window).height();

    hidden.each(function() {
      var elTop = $(this).offset().top + 50;
      
      if (windowBottom > elTop) {
        $(this).addClass('visible');
      }
    });
  }
});

setInterval(function() {
  if(scrollWait) {
    scrollWait = false;
  }
}, 200);
＆＃13;
.post {
  height: 300px;
  background-color: #cccccc;
  margin-bottom: 30px;
}

.fadein {
  opacity: 0;
  will-change: opacity;
}

.fadein:first-child {
  opacity: 1;
}

.visible:not(:first-child) {
  animation: fadeIn;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<main>
  <div class="post fadein visible"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
  <div class="post fadein"></div>
</main>
＆＃13;
＆＃13;
＆＃13;