Question

我知道它有点乱，所以如果有人有更好的解决方案会很棒，但任何想法为什么点击事件不起作用？而且我是否正确地暂停和恢复？哦，加上有没有人知道重启的好方法，因为没有完成那一点。

感谢您的帮助

JS：

var playing = false;

    $(document).ready(function () {

        var svgPath = $("#ring");

         $("#pause").on("click", function () {
            $(svgPath).removeClass("active");
            $(svgPath).addClass("paused");
        });

        $("#resume").on("click", function () {
            $(svgPath).removeClass("paused");
            $(svgPath).addClass("active");
        });

        $("#restart").on("click", function () {

        });

        $('#loader').on("click", function () {
            if (!playing) {
                $("svg path").attr("class", "active");
                /* $("#circle").attr("class", "active"); */
                $("svg path#back").attr("stroke", "#034870");
                $("svg path#back").attr("fill", "#FFFFFF");
                $("svg path#ring").attr("stroke", "#FF1251");
                playing = true;
            }
            else {
                $("svg path").attr("class", "");
                /* $("#circle").attr("class", ""); */
                playing = false;
            }

        });

    });

Answer 1

我设法让这个工作。我发现点击事件并没有改变类。使用addClass和removeClass只是不想使用.attr，因为你开始制作动画就是一种享受。

    $("body").on("click", "#pause",function () {
        $("svg path").attr("class", "active paused");
    });

    $("body").on("click", "#resume", function () {
        $("svg path").attr("class", "active");
    });

    $("#restart").on("click", function () {
        $("svg path").attr("class", "");
    });

JSFiddle link

JS点击事件不能用于暂停css动画

1 个答案: