I have a CSS animation that I want to be applied in 200ms intervals. I've set up the CSS like this:

```
.discrete {
    position:relative;
    opacity:1;

    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.discrete.out {
    left:-40px;
    opacity:0;    
}

```

I then want to stagger the application of the `.discrete.out` class in 200ms intervals. I've tried the following:

```
$('.discrete').each(function() {
    $(this).delay(200).addClass('out');
});

```

And this:

```
$('.discrete').each(function() {
   var theNode = $(this); 
   setTimeout(function() {
       theNode.addClass('out');
    }, 200);
});

```

But in both cases, the animation just occurs all at once!

Any ideas?