Change div style upon click

Question

I've got a div say <div style="background-position: 50% 0"></div>.

What I want is to increase background-position 50% more each time I click on it, i.e. <div style="background-position: 100% 0"></div>, then <div style="background-position: 150% 0"></div> and so on. is there a way to do that with jquery?

Your question title says "Change font style upon click" while your question asks about background-position? :) — Ankit Jaiswal, Nov 21 '13 at 10:34

score 0 · Accepted Answer · answered Nov 21 '13 at 10:39

0

Try using .animate() jquery method:

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

answered Nov 21 '13 at 10:39

A. Wolff

74,033
9
94
155

this actually worked out. thanks! accordingly, if I'd want to reduce 50% I'll have to change it to '-=50%', right? – sdvnksv Nov 21 '13 at 10:59

score 0 · Answer 2 · answered Nov 21 '13 at 10:39

fiddle Demo

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

or

fiddle Demo

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

score 0 · Answer 3 · answered Nov 21 '13 at 10:46

0

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

answered Nov 21 '13 at 10:46

Suresh

186
2
14

Change div style upon click

3 Answers3