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（以及X）似乎存在问题。常见的解决方法是step：http://api.jquery.com/animate/

的animate方法

您可以为border-spacing之类的隐藏css属性设置动画，并将其作为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控制台中有效，所以我希望它适合你！

Jquery和背景位置问题

1 个答案: