# Little animation with JQuery
**URL:** https://forum.kirupa.com/t/little-animation-with-jquery/635542
**Category:** web dev
**Created:** [November 5, 2016, 7:45pm UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542 "2016-11-05T19:45:55Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)
#### Post date: [November 5, 2016, 7:45pm UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542/1 "2016-11-05T19:45:55Z")
Hey there ! I’m trying to make a animation with this code:
```
$(".MyClass").each(function(index) {
setTimeout($(this).fadeIn("slow"), 1000);
});
```
The idea was to wait a second then execute the function for each element in the JQuery object, but all the elements are animated in the same time. I managed to get it to work doing this:
```
var lenght = 0;
var index = 0;
$(".MyClass").each(function(index) {
$(this).addClass("MyClass-"+index);
length++;
});
var id = setInterval(function() {
$(".MyClass-"+index).fadeIn(1000);
index++;
stopInterval();
}, 1000);
function stopInterval() {
if (index > length) {
clearInterval(id);
}
}
```
But I’m still want to know why the first code didn’t work.
---
### Author:  [@kadaj](https://forum.kirupa.com/u/kadaj)
#### Post date: [November 5, 2016, 9:37pm UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542/2 "2016-11-05T21:37:27Z")
Try this maybe
```
$(".MyClass").each(function(index, value) {
setTimeout(function (v) {$(v).fadeIn("slow") }, 1000, value);
});
```
---
### Author:  [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)
#### Post date: [November 5, 2016, 10:17pm UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542/3 "2016-11-05T22:17:47Z")
Didn’t work ☹ They animated at the same time.
---
### Author:  [@kadaj](https://forum.kirupa.com/u/kadaj)
#### Post date: [November 6, 2016, 6:36am UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542/4 "2016-11-06T06:36:04Z")
You can multiply the index with the fadeIn time which will animate one after the other.
```
$(".MyClass").each(function (k,v) {
$(v).fadeIn(k*1000);
});
```
[jsfiddle demo](https://jsfiddle.net/kadaj/n96jnhnt/)
---
### Author:  [@Jonny\_Silva](https://forum.kirupa.com/u/Jonny_Silva)
#### Post date: [November 6, 2016, 10:00pm UTC](https://forum.kirupa.com/t/little-animation-with-jquery/635542/5 "2016-11-06T22:00:50Z")
Thanks ! That’s really cool, I would nerver come up with it myself !