My problem is that I am using the .hover method to get the x position of a background-img. When i ask typeof it returns as undefined. When i ask it to alert me the returned value it gives me: "10px", how can I make this an integer value that gets stored in the variable properly?

My function goes as follows:

$("#menu li").hover(  
    function () { 
        var xPos = $(this).css('background-position-x')   
        $(this).stop().animate({
            backgroundPosition: xPos + "px 0px"
         }, 500); 
    },  

    function () {
        var xPos = $(this).css('background-position-x')   
        $(this).stop().animate({
            backgroundPosition:  xPos + "px 35px"
        }, 500); 
    }
);

My problem is that I am using the .hover method to get the x position of a background-img. When i ask typeof it returns as undefined. When i ask it to alert me the returned value it gives me: "10px", how can I make this an integer value that gets stored in the variable properly?

My function goes as follows:

$("#menu li").hover(  
    function () { 
        var xPos = $(this).css('background-position-x')   
        $(this).stop().animate({
            backgroundPosition: xPos + "px 0px"
         }, 500); 
    },  

    function () {
        var xPos = $(this).css('background-position-x')   
        $(this).stop().animate({
            backgroundPosition:  xPos + "px 35px"
        }, 500); 
    }
);

• javascript
• jquery
• css
• variables
• background

• In the future, please use the code button in the editor ({}) to format your code. – Andrew Whitaker Commented Mar 23, 2012 at 2:02
• Note that background-position-x is not a standard and it's not supported in all browsers. – elclanrs Commented Mar 23, 2012 at 2:03
• 1 First of all, I'm pretty sure you can't use jQuery animate on a property that has multiple values. One value at a time in the animate method. – jfriend00 Commented Mar 23, 2012 at 2:03
• Oh no the reason i need the x value, is because i am using one image, for multiple menu items, the x position is the value that is not going to change. I just need the image to up and down, hence only the y value is changing. – HLB Commented Mar 23, 2012 at 2:08
• Don't use background-position-x/background-position-y, unless you like it when your code breaks in Firefox (and possibly also other browsers). stackoverflow./questions/9354321/… – thirtydot Commented Mar 23, 2012 at 3:20

2 Answers 2

You may find the parseInt() function is what you're looking for: http://wap.w3schools./jsref/jsref_parseint.asp

var xPos = parseInt($(this).css('background-position-x'));

That will evaluate the string until it runs into a non-number character. So 10px will bee 10.

However, if all you're using it for is the function you've written, you could probably just take off the first "px" that you're concatenating and it should work:

var xPos = $(this).css('background-position-x');
$(this).stop().animate({backgroundPosition: xPos + " 0"}, 500);

You can just remove the 'px'

var xPos = $(this).css('background-position-x').slice(0, -2);