Jquery 单击即可更改div样式

我有一个div说

我想要的是每次单击背景位置时，将其增加50%，即，

，然后，

等等。有没有办法用jquery做到这一点？

尝试使用

.animate（）

jquery方法：

$('div').click(function () {
    $(this).animate({
        backgroundPositionX: '+=50%'
    },0);
});

---

或

---

使用.css（）函数实现此目的当您的问题询问背景位置时，您的问题标题显示“单击后更改字体样式”：是的，请编辑标题或问题…对不起，我想的事情太多了；-）改变了这实际上是可行的。谢谢因此，如果我想减少50%，我必须将其更改为“-=50%”，对吗？

$('div').click(function () {
    var perc = parseInt($(this).attr('style').match(/\d+%/g)) + 50;
    $(this).attr('style', "background-position: " + perc + "% 0");
});

$('div').click(function () {
    var perc = parseInt($(this).attr('style').match(/\d+%/g)) + 50;
    $(this).css("background-position", perc + "% 0");
});

$('div').css('background-position', function (i, value) {
    var x = parseInt(value, 10);
    return (x + 50) + "%" + " 0";
});