Stop CSS animation with jQuery?

Question

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

I don't know about you, but I've never heard of a <-webkit-keyframes><bg>Content</bg></-webkit-keyframes> structure before :p — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 2, 2014 at 18:57
You cannot select CSS Styles, you have to select the element and toggle the class on/off of that. — Patrick Evans
– Patrick Evans, Commented Feb 2, 2014 at 18:57

Lucky Soni · Accepted Answer · 2014-02-02 18:56:19Z

1

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

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

answered Feb 2, 2014 at 18:56

Lucky Soni

6,8883 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Stop CSS animation with jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related