addClass 및 지연을 사용하여 .each() 메소드를 수행하려면 어떻게해야합니까?

Question

.delay() 메서드는 알고 있지만 큐에 애니메이션을 추가하는 경우에만 적용됩니다.

내가하고있는 일은 css3 (클래스 불투명도 추가 및 제거)로 애니메이션 '파도'효과를 만드는 것입니다.

나는 애니메이션에 지연이 있다고 말하고 싶습니다. 중간에 .3s라고 말하면 전체가 끝나면 루핑을 계속해야합니다. 즉,

이 내가 지금까지 작성 뭘하려 한 번에 페이드 모든 그들 때문에 애니메이션은 또한 '스택'방식으로 시작해야하지만

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.css-pineapple div').each(function(i) { 
      addO($(this)); 
     }); 
    }); 

    function addO(element) { 
     setTimeout(function() { 
      element.addClass('opaque'); 
     }, 800); 
     removeO(element); 
    } 

    function removeO (element) { 
     setTimeout(function() { 
      element.removeClass('opaque'); 
     }, 500); 
    } 
</script> 

<div class="css-pineapple"> 
    <div class="t1"></div> 
    <div class="t2"></div> 
    <div class="t3"></div> 
    <div class="b1"></div> 
    <div class="b2"></div> 
    <div class="b3"></div> 
    <div class="b4"></div> 
    <div class="b5"></div> 
    <div class="b6"></div> 
    <div class="b7"></div> 
    <div class="b8"></div> 
    <div class="b9"></div> 
    <div class="b10"></div> 

</div> 

Answer 1

이는 바이올린이나 보는 뭔가 더없이 대답하지만 시도하기 어렵다 :

를

$(document).ready(function(){ 
    Start($('.css-pineapple div')); 
}); 

function Start(elem) { 
    elem.each(function(i, e) { 
     setTimeout(function() { 
      $(e).addClass('opaque'); 
      setTimeout(function() { 
       $(e).removeClass('opaque'); 
       if (i>=elem.length-1) Start($('.css-pineapple div')); 
      }, 500); 
     }, 800*i); 
    }); 
} 

Answer 2

이 시도 작동하지 않습니다

(각 요소에 대해 800에 의해 지연을 증가)

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.css-pineapple div').each(function(i) { 
      addO($(this),800*i); 
     }); 
    }); 

    function addO(element,delay) { 
     setTimeout(function() { 
      element.addClass('opaque'); 
      removeO(element); 
     }, delay); 
    } 

    function removeO (element) { 
     setTimeout(function() { 
      element.removeClass('opaque'); 
     }, 500); 
    } 
</script>