CODEWITHSUNDEEP
jquerycss
Vivian Kennedy
Vivian Kennedy

Reputation: 121

Passing variables into jquery css background position

I am trying to animate a background image whilst scrolling. Everything seems to be working, with the exception of the actual animation.

$(window).scroll(function() {
backgroundPos = $('#home_logging_mining').css('backgroundPosition').split(' ');
x_pos = parseInt(backgroundPos[0]);
y_pos = parseInt(backgroundPos[1]);
pos = $(this).scrollTop();
if(pos>450) {
    //$('#scroll_logo').html(pos);
    pos2 = pos-450;
    if(pos2<=40) {
        new_x = x_pos + pos2;
        new_y = y_pos + pos2;
        $('#scroll_logo').html(new_y + ' ' + new_x);
        $('#home_logging_mining').css('background-position', new_x+'px'+new_y+'px');  
    }
}

});

I can view the variable being passed through, and they are exactly what they should be. I have tested the element with different background actual integers rather than variables, and that works fine. However if I set the variables to integers, then it also stops working. So I suspect I am in some way passing the variables into the css() function incorrectly. Is there something obvious I am missing?

Upvotes: 0

Views: 380

Answers (1)

Duncan Thacker
Duncan Thacker

Reputation: 5188

Your new CSS value needs a space in the middle; the background-position is currently being set to (e.g.) "5px10px" instead of "5px 10px".

 $('#home_logging_mining').css('background-position', new_x+'px '+new_y+'px');

Upvotes: 1

Related Questions