多状态动画按钮可更改背景图像

Question

I have a problem I've been wrestling with for over a day now, and I find javascript/jquery extremely challenging, so as much dumbing down/hand holding as you can muster is very much appreciated. I am trying to create an animated button that has 3 states, with each state being clickable, and then also causing the background-image of a div to change to a corresponding image. So for example, on hit the button itself animates from state 1 to 2 and also causes the background-image of the div to change from image 1 to 2. Now hitting the button which is in state 2 causes it to animate from 2 to state 3, while changing the div's background-image from image 2 to image 3, and so on. I'm thinking to try and accomplish this with an animated sprite, which I've got working (see JSfiddle here: https://jsfiddle.net/datCodeTho/9cczqjs8/3/ ), but I can't figure out how to also be changing the div's background-image? I'm open to different solutions, and “noob-friendly” is more important than elegant code! Thanks!

Here's the Jquery I have:

    function animateButton() {
    var button = $('.hi');
    if (button.hasClass('animate-moustache-beard')) {
        button.removeClass('animate-moustache-beard').addClass('animate-beard-scissors');
    }
    else if (button.hasClass('animate-beard-scissors')) {
        button.removeClass('animate-beard-scissors').addClass('animate-scissors-moustache');
    }
    else if (button.hasClass('animate-scissors-moustache')) {
        button.removeClass('animate-scissors-moustache').addClass('animate-moustache-beard');
    }
    else {
        button.addClass('animate-moustache-beard');
    }
};
$(document).ready(function() {
    $('.hi').on("click", function() {
        animateButton();
    });
});

And here's the css:

    .hi {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}
.animate-hi {
    animation: play 2s steps(9) forwards;
}
.animate-hi-reverse {
    animation: play-reverse 2s steps(9) forwards;
}
@keyframes play {
    from { background-position:    0px; }
    to { background-position: -450px; }
}
@keyframes play-reverse {
    from { background-position: -450px; }
    to { background-position:    0px; }
} 

Answer 1

You can do this with the same approach as you did for changing the state of the button using methods:

 removeClass() 
 addClass()

or you could use jQuery

 css() 

method to specify the background image each time you click the button.

Fiddle is the first approach: