jquery animate backgroundposition only works one time - jquery-animate

Question

Basically this is used to creat a horizontal parallax effect. I use anchor links to move the page back and forth ebtween pages horizontally, which all works nicely.
Now i want to include the parallax background, which also works on the first try. below is my javascript:
<script>
$(document).ready(function () {
$("#nav a").bind("click", function (event) {
$("section").removeClass('current');
$("#nav a").removeClass('current');
event.preventDefault();
var target = $(this).attr("href");
$("#wrapper").stop().animate({
scrollLeft: $(target).position().left - $("#container").position().left,
scrollTop: $(target).position().top - $("#container").position().top,
},
1000);
var x = $("#wrapper").scrollLeft();
$("#parallax").animate({
'background-position-x': '+20%',
'background-position-y': '0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
});
</script>
what this colde does is add a class to my nav links and the section which is on screen, then animates to that section on screen, after which the parallax div should move too. This works on the first click to a new section, but after that it just stays.
I think the fault lies in the
-position-x': '+20%',
line of code, but I do not know why this wouldn't work. Has anyone got any thoughts?

Answer 1

I am not sure that you can use += in the way you are trying to.
If I understand what you are trying to do I think your logic is slightly wrong. When you click you want to move the background by 20% right? In order to do that make moving the background a function which you can call when you want to move it by 20px. Something like:
var moveBackground = function(){
// First get the current background position - assuming its 0 on first time around
var currentX = parseInt($("#parallax).css('background-position-x'));
var newX = currentX + 20;
$("#parallax").animate({
'background-position': newX + '%' + ' 0%'
}, 1200);
$(target).addClass('current');
$(this).addClass('current');
});
}
This is completely untested code, I wrote whilst at work so don't hate me if that doesnt work.