多狀態動畫按鈕可更改背景圖像

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

每次單擊按鈕時指定背景圖像的方法。

提琴是第一種方法：