Hello, I am attempting to create an animated background effect that moves up and down using the .animate() and .hover() methods in jQuery. Within my DOM, there is a div with id="#menu" containing a UL list where each item has a background positioned at different x coordinates but the same y coordinate. However, I am facing an issue with my code as it seems like my variable is not functioning properly. I am receiving an error message that states "cannot read property '1' of null value," indicating that the variable does not exist.
Below is the code snippet:
$("#menu li").hover(
function () {
var xPos = $(this).css('background-position-x')
$(this).animate({backgroundPosition: "("+ xPos + "0px)"}, 500);
}
,
function () {
var xPos = $(this).css('background-position-x')
$(this).stop().animate({backgroundPosition: xPos + "35px"}, 500);
}
);