How do I perform this .each() method with addClass and a delay?
===

I'm aware of the .delay() method, but I believe that only applies to adding animations to a queue. 

What i am doing is making an animated 'wave' effect with css3 (adding and removing the class opaque). 

I want the animation to have a delay, of say .3s in between, and when the entire each is done, it should keep looping. The animation should also begin in a 'stacked' way, so that not all of them fade in at once

This is what i tried to write so far but it does not work

    <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>