javascript - 使用 jQuery 停止 CSS 动画？

Question

有谁知道为什么这不起作用？我只希望我的按钮在单击时停止背景动画。请帮助我。

$(document).ready(function(){
    $("#togglebackgroundbutton").click(function(){
        $("-webkit-keyframes bg").toggleclass("paused");
    });
});

</script>
<style>
    body {
        background-color:green;
        -webkit-animation-name:bg;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-duration:2s;
    }

    @-webkit-keyframes bg {
        from{background-color:green;}
        50%{background-color:yellow;}
        to{background-color:green;}
    }

    .paused {
        -webkit-animation-play-state:paused;
    }

Answer 1

$(document).ready(function(){
    $("#togglebackgroundbutton").click(function(){
        $("body").toggleClass("paused");
    });
});

你应该在 body 上切换类。还有它的 toggleClass 而不是 toggleclass