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

Question

我有一个问题我已经纠结了一天多了，我发现 javascript/jquery 非常具有挑战性，所以非常感谢你尽可能多的愚蠢 down/hand .我正在尝试创建一个具有 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()

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

Fiddle是第一种方法：

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

multi-state animated button to change background-image

javascript

css

jquery

sprite