元素在用户向下滚动时淡入，如何添加动画

Question

我有这段代码可以满足我的需求，当用户向下滚动页面时，内容逐渐淡入视野，效果很好。但我希望每个 div 在出现时都具有动画效果。问题是动画一次全部发生并且只发生一次，而不是元素淡入。有办法解决这个问题吗？

HTML

<body>

<div class="headerWrap">
  <h1> A scrolling fade in test</h1>
</div>  <!--headerWrap-->

<div class="fadeInsWrap">

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockRight right">
  <h1> Fade in </h1>
</div>

<div class="fadeInBlockLeft left">
  <h1> Fade in </h1>
</div>


 </div> <!--fadeInsWrap-->
</body>

CSS

    body {
  height: 700px;
}

.headerWrap {
  text-align: center;
  margin-top: 5%;
}

.fadeInsWrap {
  width: 50%;
  height: 1000px;
  margin: 0 auto;
  border: 1px solid;
  padding-top: 5%;
}

.left {
  border: 1px solid;
  width: 50%;
  text-align: center;
  clear: both;
}

.right {
  width: 50%;
  float: right;
  border: 1px solid;
  text-align: center;
}

.fadeInBlockLeft,
.fadeInBlockRight {
  opacity: 0;
  margin-bottom: 7%;
}

.animate-inLeft {
  -webkit-animation: inLeft 600ms ease-in-out forwards;
  display: block;
}

@-webkit-keyframes inLeft {
  0% {
    -webkit-transform: translateX(900px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

.animate-inRight {
  -webkit-animation: inRight 600ms ease-in-out forwards;
  display: block;
}

@-webkit-keyframes inRight {
  0% {
    -webkit-transform: translateX(-900px);
  }
  100% {
    -webkit-transform: translateX(0px);
  }
}

JQuery

  $(document).ready(function(){

    $(window).scroll( function(){

       $(".fadeInBlockLeft, .fadeInBlockRight").each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

             bottom_of_window = bottom_of_window + 50;  

            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},1000);
                 $('.fadeInBlockLeft').addClass("animate-inLeft");
                 $('.fadeInBlockRight').addClass("animate-inRight");
            }
         }); 
       });
     });

Answer 1

您必须引用 $(this) 而不是元素 class（调用所有元素）：

$(this).addClass("animate-inLeft");
$(this).addClass("animate-inRight");

Working JSFiddle

Answer 2

我修改了你的fiddle。我想我拥有的就是您要找的东西？基本上，您只想淡入 "this" 元素。您上面的代码为每个具有 class "fadeInBlockLeft" 或 "fadeInBlockRight" 的元素制作动画。

$(document).ready(function(){
   
    $(window).scroll( function(){
    
       $(".fadeInBlockLeft, .fadeInBlockRight").each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            
    
            bottom_of_window = bottom_of_window + 50;  
          
            if( bottom_of_window > bottom_of_object ){
               
                $(this).animate({'opacity':'1'},1000);
                if($(this).hasClass('fadeInBlockLeft')){
                 $(this).addClass("animate-inLeft");
                }
                if($(this).hasClass('fadeInBlockRight')){
                 $(this).addClass("animate-inRight");
                }
            }
         }); 
       });
     });

元素在用户向下滚动时淡入，如何添加动画

Elements fade in as user scrolls down, how to also add animation

jquery

animation

fadein