Изменить стиль div при нажатии

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"; 
});