延迟动画虽然滚动

Question

我试图创建动画作为用户滚动，但我也想交错他们在他们并不都是同时发生，但一个接一个地在快速连续发生。

我正在使用下面的类添加一个类触发css动画的div，然后我试图使用setTimeout来延迟下一个动画的一点点。我想，因为它是在$.each()循环这将打击各超时，而是他们都淡出当时时间...
JSFiddle

编辑我相信我需要做到这一点的JS，因为我有很多的动画在一个混合了动画类型的页面上，并且需要延迟几毫秒的类的添加。

/** 
 
* Check if Animation is currently in view 
 
*/ 
 
function anim_in_view() { 
 
    var window_height = $(window).height(); 
 
    var window_top_position = $(window).scrollTop(); 
 
    var window_bottom_position = (window_top_position + window_height); 
 
    var $animations = $('body .animate'); 
 

 
    if ($animations.length) { 
 
    $.each($animations, function() { 
 
     var $elm = $(this); 
 
     var element_height = $elm.outerHeight(); 
 
     var element_top_position = $elm.offset().top + 50; 
 
     var element_bottom_position = (element_top_position + element_height); 
 

 
     setTimeout(function() { 
 
     if ((element_bottom_position >= window_top_position) && 
 
      (element_top_position <= window_bottom_position)) { 
 
      // $elm.delay(2000).addClass('visible'); 
 
      $elm.addClass('visible'); 
 
     } 
 
     }, 1000); 
 
    }); 
 
    } 
 
} 
 
$(window).on('load scroll resize', anim_in_view);

.flex { 
 
    margin-top: 1000px; 
 
    margin-bottom: 500px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.flex > div { 
 
    width: 33.33%; 
 
    height: 200px; 
 
} 
 
.red { 
 
    background: #f00; 
 
} 
 
.green { 
 
    background: #0f0; 
 
} 
 
.blue { 
 
    background: #00f; 
 
} 
 
.animate-opacity { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    transition: opacity 2s ease-in-out; 
 
} 
 
.animate-opacity.visible { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fadeIns" class="flex"> 
 
    <div class="animate animate-opacity red"></div> 
 
    <div class="animate animate-opacity green"></div> 
 
    <div class="animate animate-opacity blue"></div> 
 
</div>

Answer 1

你可以使用transition-delay来实现这一目标：

.animate-opacity:nth-child(2) { 
    transition-delay: 1s; 
} 
.animate-opacity:nth-child(3) { 
    transition-delay: 2s; 
} 

/** 
 
* Check if Animation is currently in view 
 
*/ 
 
function anim_in_view() { 
 
    var window_height = $(window).height(); 
 
    var window_top_position = $(window).scrollTop(); 
 
    var window_bottom_position = (window_top_position + window_height); 
 
    var $animations = $('body .animate'); 
 

 
    if ($animations.length) { 
 
    $.each($animations, function() { 
 
     var $elm = $(this); 
 
     var element_height = $elm.outerHeight(); 
 
     var element_top_position = $elm.offset().top + 50; 
 
     var element_bottom_position = (element_top_position + element_height); 
 

 
     if ((element_bottom_position >= window_top_position) && 
 
     (element_top_position <= window_bottom_position)) { 
 
     // $elm.delay(2000).addClass('visible'); 
 
     $elm.addClass('visible'); 
 
     } 
 
    }); 
 
    } 
 
} 
 
$(window).on('load scroll resize', anim_in_view);

.flex { 
 
    margin-top: 1000px; 
 
    margin-bottom: 500px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 
.flex > div { 
 
    width: 33.33%; 
 
    height: 200px; 
 
} 
 
.red { 
 
    background: #f00; 
 
} 
 
.green { 
 
    background: #0f0; 
 
} 
 
.blue { 
 
    background: #00f; 
 
} 
 
.animate-opacity { 
 
    opacity: 0; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    transition: opacity 2s ease-in-out; 
 
} 
 
.animate-opacity:nth-child(2) { 
 
    transition-delay: 1s; 
 
} 
 
.animate-opacity:nth-child(3) { 
 
    transition-delay: 2s; 
 
} 
 
.animate-opacity.visible { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fadeIns" class="flex"> 
 
    <div class="animate animate-opacity red"></div> 
 
    <div class="animate animate-opacity green"></div> 
 
    <div class="animate animate-opacity blue"></div> 
 
</div>