Question

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>

Answer 1

This is hard to answer without a fiddle or something more to look at, but try:

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