CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ZWis212
ZWis212

Reputation: 132

JQuery animate has no effect?

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>

Upvotes: 0

Views: 339

Answers (3)

Brock Adams
Brock Adams

Reputation: 93443

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>

Upvotes: 1

D3myon
D3myon

Reputation: 181

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

all the best.

Upvotes: 0

Matt
Matt

Reputation: 3760

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;

Upvotes: 0

Related Questions