时间戳

首页 > 解决方案 > 创建念珠动画

html - 创建念珠动画

问题描述

我正在尝试在 jquery 的视频中制作动画，但我坚持下去。我的代码显示圆圈，但 jquery 中没有动画我不知道为什么：

这是我的代码：

$(document).ready(function () {
    let XPosition = 0;
    let YPosition = 0;
    const $cercle = $(".cercle");
    $(document).click(function (e) {
        XPosition = e.pageX;
        YPosition = e.pageY;
        $cercle.stop().animate({ top: YPosition, left: XPosition });
    });
});
<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .cercle {
                height: 25px;
                width: 25px;
                background-color: #bbb;
                border-radius: 50%;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div style="text-align: center">
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        <div class="cercle"></div>
        </div>
    </body>
</html>

这是我想做的动画：

标签： htmljquerycss

解决方案

推荐阅读