jquery - Jqueryとバックグラウンドの位置に関する問題

Question

私は現在、いくつかの単純なJQueryアニメーションを備えたWebサイトを持っていますが、Safari以外では機能せず、どこが間違っているのかわかりません。

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);
});

そしてこれ：

// 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

FireFoxとOperaにbackgrgroundPositionY（と）に問題があるようです。X一般的な回避策は次のstep方法ですanimate： http： //api.jquery.com/animate/

いくつかの隠されたcss-propertyのようなアニメーションを作成し、これをメソッドborder-spacingのステッパーとして使用できます。step

$('#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
    });
});

これは私のFireBugコンソールで機能したので、うまくいくことを願っています！