CODEWITHSUNDEEP
javascriptjqueryhtmlcss
CAMERONLINVILLE
CAMERONLINVILLE

Reputation: 11

Stop CSS animation with jQuery?

Does anyone know why this isn't working? I just want my button to stop the background animation when it is clicked. Please help me.

$(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;
    }

Upvotes: 1

Views: 310

Answers (1)

Lucky Soni
Lucky Soni

Reputation: 6878

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

You should toggle class on body. Also its toggleClass and not toggleclass

Upvotes: 1

Related Questions