There is nothing wrong with your Javascript here
The problem is that your <li>
elements are masking your red circles. Visually you can see them, but if you right-click and Inspect Element
on one of your circles it will show your last <li>
item. You can also check that your animations are working by writing in your console:
$('.c1').click()
You can usually fix this playing with their z-indices
. I.e. Change the z-index
of your circles to be higher and set the values of z-index
on your other elements to be lower.
However, the issue seems to be that you have a each circle
in a new <li>
element. I was able to fix this on your site by having the following:
<div class="circle c1 animated"></div>
<div class="circle c2 animated"></div>
<div class="circle c3 animated"></div>
<div class="square s1"></div>
<div class="square s2"></div>
<div class="square s3"></div>
In one <li>
element instead of having them in separate ones.