Question

I currently have my website with some simple JQuery animation but it doesnt work in anything but Safari and I dont know where im going wrong:

http://www.mousehouse.org.uk/index.php

// Header Animations
$('nav ul li #Global_Logo').animate({'background-position-y': '0px'}, 150)
.hover(function(){
    $(this).stop().animate({'background-position-y': '-107px'}, 150);
}, function(){
    $(this).stop().animate({'background-position-y': '0px'}, 150);
});

And this one:

// Work Links Animations
$('#Global_Work li a').stop().animate({backgroundPositionY: "0px", backgroundPositionX: "0px"}, 0)
.hover(function(){
    $(this).stop().animate({backgroundPositionY: "-300px", backgroundPositionX: "0px"}, 150);
}, function(){
    $(this).stop().animate({backgroundPositionY: "0px", backgroundPositionX: "0px"}, 150);
});

Answer 1

There seems to be an issue with backgrgroundPositionY (and X) in FireFox and Opera. A common workaround is the step method of animate: http://api.jquery.com/animate/

You can animate some hidden css-property like border-spacing and take this as an stepper for your step method:

$('#Global_Work li a').hover(function(){
    $(this).stop().css({'border-spacing': 0}).animate({
        'border-spacing': -300
    }, {
        step: function(now, fx){
            $(this).css("background-position", "0px "+now+"px");
        },
        duration: 300
    });
}, function(){
    $(this).stop().css({'border-spacing': 0}).animate({
        'border-spacing': 300
    }, {
        step: function(now, fx){
            $(this).css("background-position", "0px "+(now-300)+"px");
        },
        duration: 300
    });
});

This worked in my FireBug console, so I hope it works for you!