jquery - Jquery和背景位置的问题

Question

我目前的网站上有一些简单的 JQuery 动画，但它在 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(and )似乎存在问题。X一个常见的解决step方法是animate：http ://api.jquery.com/animate/

您可以为一些隐藏的 css 属性设置动画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 控制台中有效，所以我希望它对你有用！