JQuery animate has no effect?

Question

I'm just screwing around with some HTML, CSS, JavaScript, and jQuery and for some reason my jQuery will not do anything at all.

That is, I click a circle and the animation doesn't work.
There are no errors in the console.

Am I not linking it correctly? Each file is in the same folder.

 $('.circle').click (function () { $('#c1').animate ( { left: '0px' }, 200); $('#c2').animate ( { left: '285px' }, 200); } ); 

 .loader { display: block; margin-left: auto; margin-right: auto; width: 404px; } .circle { height: 50px; width: 50px; border-radius: 100%; display: inline-block; margin: 7px; } #c1 { background-color: #4285f4; } #c2 { background-color: #EA4335; } #c3 { background-color: #FCBD06; } #c4 { background-color: #4285F4; } #c5 { background-color: #34AA54; } #c6 { background-color: #EA4335; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="loader"> <div class="circle" id='c1'></div> <div class="circle" id='c2'></div> <div class="circle" id='c3'></div> <div class="circle" id='c4'></div> <div class="circle" id='c5'></div> <div class="circle" id='c6'></div> </div> 

Answer 1

See the documentation for jQuery animate() :

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static , which it is by default.

This is based on CSS behavior. See CSS static and relative positioning .

You need to set position: relative; in the .circle CSS.

Also the question's animation has left: '0px' for the first animation, so it won't go anywhere, irregardless!

Run this code snippet (button at the bottom):

 $('.circle').click (function () { $('#c1').animate ( { left: '20px' }, 200); $('#c2').animate ( { left: '285px' }, 200); } ); 

 .loader { display: block; margin-left: auto; margin-right: auto; width: 404px; } .circle { height: 50px; width: 50px; border-radius: 100%; display: inline-block; margin: 7px; position: relative; text-align: center; } #c1 { background-color: #4285f4; } #c2 { background-color: #EA4335; } #c3 { background-color: #FCBD06; } #c4 { background-color: #4285F4; } #c5 { background-color: #34AA54; } #c6 { background-color: #EA4335; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="loader"> <div class="circle" id='c1'>1</div> <div class="circle" id='c2'>2</div> <div class="circle" id='c3'>3</div> <div class="circle" id='c4'>4</div> <div class="circle" id='c5'>5</div> <div class="circle" id='c6'>6</div> </div> 

Answer 2

The left property is to be used with absolute positioned elements, which you don't seem to have.

w3schools CSS reference

Try changing a property like background-color so that you can clearly see the outcome.

Debugging with a console.log is also useful or debugger;

Answer 3

try to add position: relative; or position: absolute; to your circle class. both should do it.

all the best.