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

我修改了你的小提琴。我想我拥有的是你在寻找什么？基本上，你只想淡出＆＃34;这个＆＃34;元件。上面的代码为每个具有类＆＃34; fadeInBlockLeft＆＃34;的元素执行动画。或者＆＃34; fadeInBlockRight＆＃34;。

＆＃13;

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

＆＃13;

Answer 2

你必须引用$（this）而不是元素类（调用所有元素）：

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

Working JSFiddle

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

2 个答案: