Question

我有一个问题，我已经摔跤了一天多了，而且我发现javascript / jquery非常具有挑战性，所以尽可能多的减少/手持，因为你可以鼓起来非常感激。我正在尝试创建一个具有3个状态的动画按钮，每个状态都是可点击的，然后还会使div的背景图像更改为相应的图像。因此，例如，按下按钮本身会从状态1到2进行动画处理，并且还会使div的背景图像从图像1更改为2.现在按下处于状态2的按钮会使其从2动画到状态3，同时将div的背景图像从图像2更改为图像3，等等。我想用一个动画精灵来尝试完成这个，我已经开始工作了（参见JSfiddle：https://jsfiddle.net/datCodeTho/9cczqjs8/3/），但我无法弄清楚如何改变div的背景图像？我对不同的解决方案持开放态度，“noob-friendly”比优雅的代码更重要！谢谢！

这是我的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是第一种方法：

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

1 个答案: