Jquery animate - Type error: * is not a function

[jarv]

Please help, I am trying to apply a slide up animation on a background image but I am not sure I am writing my code correctly.

Firstly, I am getting a type error: * is not a function

secondly, I think I need to add CSS styling property to background-position: -182px and not just bottom: '-182'

<script type="text/javascript">
	  $(document).ready(function() {
		// on mouse over
		$("ul#sections li#who").hover(function () {
			// animate opacity to full
			$(this).stop().animate({
				bottom: '-182'
			}, 'slow');
		},
		// on mouse out
		function () {
			// animate opacity to nill
			$(this).stop().animate({
				top: 0
			}, 'slow');
		});
	});
</script>

[jarv]

ok, I just changed code to this:

<script type="text/javascript">
$('ul#sections li#who').css({
    backgroundPosition: "0% 0%"
}).hover(
    function() {
        $(this).stop().animate({
            'background-position-x': "50%"
        }, "600");
    }, function() {
        $(this).stop().animate({
            'background-position-x': "0%"
        }, "600");
    }
);
</script>

still nothing

[devnull69]

Let me guess ... you are testing in Firefox? Sadly, Mozilla has removed the support for background-position-x and background-position-y as of FF3 claiming that they were not part of specification. So it just won't work in Firefox any more. If you test in Chrome for example, it should work, though.

I haven't come across a working version of .animate() for background-position yet.