javascript - jQuery animate 没有效果？

Question

我只是在玩弄一些 HTML、CSS、JavaScript 和 jQuery，出于某种原因，我的 jQuery 根本不会做任何事情。

也就是我点了一个圆，动画没有效果。
控制台没有错误。

我没有正确链接吗？每个文件都在同一个文件夹中。

$('.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

参见 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.

这是基于 CSS 行为。参见 CSS static and relative positioning .

您需要在 .circle CSS 中设置 position: relative;。

问题的动画还有 left: '0px' 第一个动画，所以它不会去任何地方，无论如何!

运行此代码片段(底部的按钮):

$('.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>