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

我有一个问题已经解决了一天多了，我发现javascript/jquery非常具有挑战性，所以非常感谢您尽可能多地减少噪音/握手。我试图创建一个有3个状态的动画按钮，每个状态都是可点击的，然后还将div的背景图像更改为相应的图像。例如，点击按钮时，按钮本身会从状态1变为状态2，还会导致div的背景图像从图像1变为图像2。现在点击处于状态2的按钮会使其从2动画化为状态3，同时将div的背景图像从图像2更改为图像3，依此类推https://jsfiddle.net/datCodeTho/9cczqjs8/3/），但我不知道如何同时更改div的背景图像？我对不同的解决方案持开放态度，"noob友好"比优雅的代码更重要！谢谢

这是我的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; }
}