問題與jQuery和背景的位置

目前，我有我的網站有一些簡單的jQuery動畫，但它決不是Safari瀏覽器不工作，我不知道我去錯了：問題與jQuery和背景的位置

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

來源

2013-02-04 Joseph Gregory

您的動畫在Chrome 24.0.1312.56 – stevejpurves

中爲我工作，第一個動畫（'＃Global_Logo'）在FireFox中工作。第二個不是。也許你應該使用'background-position-y'... – AvL

你確定嗎？我在Firefox，IE9/10和Chrome上都試過Mac和Windows，但它不工作？標誌是爲了移動，但目前的標誌不做任何事情，工作圖像只是恢復到標準的CSS備份 –

似乎是一個問題，在Firefox和Opera backgrgroundPositionY（和X）。一個常見的解決方法是animate的step方法：

能夠繪製一些隱藏的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 
    }); 
});

這個工作在我的螢火控制檯，所以我希望它適合你！

來源

2013-02-04 22:04:59 AvL

這似乎並不適用於所有瀏覽器，現在safari不對齊 –

我設置了一個http：///jsfiddle.net/VzkuY/，它適用於safari + FireFox + Opera for mac ... – AvL

對不起，這是我在理解代碼時的錯誤。非常感謝！ –

問題與jQuery和背景的位置

回答

相關問題