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

Question

我有一个问题已经困扰了整整一天，我发现javascript / jquery非常具有挑战性，因此非常感谢您尽可能多的笨拙/手持。 我正在尝试创建一个具有3个状态的动画按钮，每个状态都可以单击，然后还导致div的背景图像更改为相应的图像。 因此，例如，单击时按钮本身会从状态1变为2动画，并且还会使div的背景图像从图像1变为2。现在，单击处于状态2的按钮会使按钮从2变为状态动画。 3，同时将div的背景图像从图像2更改为图像3，依此类推。 我正在尝试使用动画精灵来实现此目的，我已经开始工作了（请参见JSfiddle： https ：//jsfiddle.net/datCodeTho/9cczqjs8/3/），但我不知道该如何做也正在改变div的背景图像吗？ 我对不同的解决方案持开放态度，“友好的用户”比优雅的代码更重要！ 谢谢！

这是我拥有的Jquery：

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

这是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

您可以使用与使用方法更改按钮状态相同的方法来执行此操作：

 removeClass() 
 addClass()

或者您可以使用jQuery

 css() 

每次单击按钮时指定背景图像的方法。

提琴是第一种方法：