Question

我有一个div <div style="background-position: 50% 0"></div>。

我想要的是每次点击它时增加background-position 50％，即<div style="background-position: 100% 0"></div>，然后是<div style="background-position: 150% 0"></div>，依此类推。有没有办法用jquery做到这一点？

Answer 1

尝试使用.animate() jquery方法：

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

Answer 2

fiddle Demo

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

<小时/> 或

fiddle Demo

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

Answer 3

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

点击后更改div样式

3 个答案: