jquery adding attr values

Question

I have at the bottom in the else statement subtracting, which works fine, but the if statement is not correctly adding values. How the script works, when the user scrolls it moves as fast as speed-racers value tells it to move, speed-racer subtracts from racer-offset, when racer-offset is 0, it stops any further movement, then when the user scrolls back the opposite direction, it should add the value of speed-racer back to racer-offset till it reaches leftMovements value, in which it will stop. It subtracts correctly, but when it is suppose to add values back is where the problem begins. In the image below you see under subtracting racer-offset="2525252525252525", what it should do, is take the value of 25 + add it to the exisiting value, and that will be the value of racer-offset, till the next scroll takes place. Thank you

Problem code ------

 $('.images').each(function(){
            if($(this).position().left >= $(this).attr('loc')){
            console.log("0 == stopped");

            }
            else {
            speedR = $(this).attr('speed-racer');
            $(this).css({left : "+="+speedR});
            $(this).attr('racer-offset') + speedR;
            $(this).attr('racer-offset', $(this).attr('speed-racer') + $(this).attr('racer-offset'));
            }
        });

Entire code:

$(window).scroll(function(){
if(lastLeftLocation > $(document).scrollLeft()) {
    $('.images').each(function(){
            if($(this).position().left >= $(this).attr('loc')){
            console.log("0 == stopped");

            }
            else {
            speedR = $(this).attr('speed-racer');
            $(this).css({left : "+="+speedR});
            $(this).attr('racer-offset') + speedR;
            $(this).attr('racer-offset', $(this).attr('speed-racer') + $(this).attr('racer-offset'));
            }
        });
    }
else {
    $('.images').each(function(){
        if($(this).attr('racer-offset') <= 0){
        console.log("0 == stopped");
        }
        else {
        speedR = $(this).attr('speed-racer');
        $(this).css({left : "-="+speedR});
        $(this).attr('racer-offset', $(this).attr('racer-offset') - speedR);
        }
    });
}

});

HTML

   <img class="images" racer-offset="1075" speed-racer="25" src="http://feeneywireless.com/assets/img/fwman/FeeneyMan_prod_st.png" loc="1344" leftmovement="1300" style="left: 1119px;">

Subtracting Incorrectly

Adding correctly

Answer 1

You aren't converting your values to integers. Therefore your result is a concatenated string:

"250" + "250" = "250250";

To convert your values to integers, simply stick a Unary Plus (+) before the call:

speedR = +$(this).attr('speed-racer');

And:

$(this).attr('racer-offset',
                   +$(this).attr('speed-racer') + +$(this).attr('racer-offset'));

When converted to an integer:

250 + 250 = 500;

Answer 2

You are doing a string concatenation instead of arithmetic addition, convert the string into int using parseInt() before adding them

$(this).attr('racer-offset', parseint($(this).attr('speed-racer'), 10) + parseInt($(this).attr('racer-offset'), 10));