Question

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

也就是说，我点击一个圆圈，动画也不起作用控制台中没有错误。

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

＆＃13;

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

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

Answer 1

请参阅the documentation for jQuery animate()：

方向属性（顶部，右侧，底部，左侧）如果元素的位置样式属性是静态的，则对元素没有明显的影响，默认情况下是这样。

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

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

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

运行此代码段（底部的按钮）：

＆＃13;

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

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

Answer 2

left属性将与绝对定位元素一起使用，您似乎没有。

w3schools CSS reference

尝试更改background-color等属性，以便您可以清楚地看到结果。

使用console.log进行调试也很有用，或debugger;

Answer 3

尝试将position: relative;或position: absolute;添加到您的圈子类中。两者都应该这样做。

一切顺利。

JQuery动画没有效果？

3 个答案: