CODEWITHSUNDEEP
javascriptjquerycsscss-position
tonoslfx
tonoslfx

Reputation: 3442

jQuery Change Background Position Using Relative Value

I am trying to change the image background position X & Y using relative values (+= and -=) when click on the button. It seems to reset itself to 0% 0%. It didnt work.

Fiddle

$(function(){
 $("body").on("click", "#move", function() {            
    $("#obj-1").css({ 'backgroundPosition': '+=0px -=5px' });             
    return false;
 });
})

Upvotes: 1

Views: 1014

Answers (2)

Raja Asthana
Raja Asthana

Reputation: 2100

Change the click function as below:

$(function(){
    $("body").on("click","#move", function(){
        var backgroundPos = $("#obj-1").css('backgroundPosition').split(" ");
        var xPos = parseInt(backgroundPos[0], 10);
        var yPos = parseInt(backgroundPos[1], 10);
        var newX = xPos + 0;
        var newY = yPos - 5;
        $('#obj-1').css({
  'background-position':newX+'px '+newY+'px'
});
        return false;
    });
});

Updated fiddle here. hope it helps.

Upvotes: 2

Kheema Pandey
Kheema Pandey

Reputation: 10285

Now on click image will shift from top and left to 10px eveyrtime.

here is the updated jquery code.

$(function(){
 $("body").on("click","#move", function(){
        $("#obj-1").css({
            left: $("#obj-1").position().left + 10 + "px",
            top: $("#obj-1").position().top + 10 + "px"
        }); 
 return false;
 });
})

Here is the working Demo http://jsfiddle.net/kheema/8f2pf/7/

Upvotes: 0

Related Questions