Question: I have an animated sequence for all the `div` with the class `loaded`. 

The goal is to add the class `visible` to these `div` (it's a css opacity animation) and then remove the class `loaded` once the animation is completed/finished.

```
$('.loaded').each(function(index) {
  (function(that, i) {
     var t = setTimeout(function() {
        $(that).addClass("visible");
      }, 200 * i);
   })(this, index);
 });

```

Thanks for the help!

Answer: 
You can use the listener 'transitionend' or 'animationend', 

> 
> When using the css transition use transitionend, and when using
>  @keyframes/animation, use animationend.
> 
> 
> 

according to [animationend event not firing](https://stackoverflow.com/questions/41530263/animationend-event-not-firing)

```
$('.loaded').each(function(index) {
  (function(that, i) {
        that.addEventListener('transitionend', function(e) {$(that).removeClass("loaded"); });
     var t = setTimeout(function() {
        $(that).addClass("visible");
      }, 200 * i);
   })(this, index);
 });

```
You can attach an event listener for the [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event) or [`animationend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event) events with jQuery [`.on()`](https://api.jquery.com/on/), and then remove the class in the callback

Which one you use depends on how you're handling the animation:

* [`animationend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event) for `@keyframes/animation`
* [`transitionend`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event) for `transition`

```js
$('.loaded').each(function(index) {
  (function(that, i) {

    setTimeout(function() {
      $(that).addClass("visible");
      $(that).on('transitionend', () => {
        $(that).removeClass('loaded')
      });
    }, 200 * i);

  })(this, index);
});
```

```css
.visible {
  opacity: 1;
  transition: all 500ms ease;
}

div {
  opacity: 0;
  color: blue;
}

.loaded {
  color: red;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
<div class="loaded">Demo</div>
```