当元素进入视口时jQuery FadeIn（）

Question

当向下滚动页面时，我想在它们进入视口视图时立即淡入淡出不同的元素。

但是，我的代码一次出现在所有DIV（具有“ .fadethis”类）中，而不是仅出现在该特定元素中时：

$(window).scroll(function() {
  $(".fadethis").each(function() {
  var top_of_element = $(this).offset().top;
  var bottom_of_element = $(this).offset().top + $(this).outerHeight();
  var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
  var top_of_screen = $(window).scrollTop();

  if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
   $(this).fadeIn(10000);
  }

 });
});

的CSS

.fadethis{
display:none;
}

Answer 1

导入jQuery， animate.less和Waypoint

Javascript：

$(document).ready(function(){
    $('.fromLeft').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("bounceInLeft");
    },
    {offset:'100%'});
    $('.fromRight').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("bounceInRight");
    },{offset:'100%'});
    $('.appear').waypoint(function()
    {
      $(this.element).css('opacity',1);
      $(this.element).addClass("fadeIn");
    },{offset:'100%'});
});

和HTML

<div class="animated onView fromLeft">
appears from left
</div>

在这里您可以看到我做的一个例子