Question

我几天前制作了一个关于动画背景图像的帖子。我被建议使用一个工作正常的插件。我使用的是jQuery 1.4.2 - 但是，我在网站上遇到了coda滑块的实际问题。然后我决定更改为最新的jQuery（1.6.1），问题得到了解决。另一方面，我的背景动画在某些浏览器中破裂了。

奇怪的是它可以在mac上的safari中工作，而ie9,8,7甚至6则使用透明的png修复。它对我来说不适用于mac或pc上的firefox和mac上的opera。

还有其他人有这样的问题吗？我花了一些时间制作这些图片，并希望将它排序！必须有一些方法围绕这个，或者我写的代码可能是完全错误的！？

我用实际的图像和脚本做了一个小提琴。这是我做的第一个，所以我不是100％肯定我做得对，随便说它是否需要调整......

You can find the jsfiddle here

非常感谢：）

Answer 1

看起来很漂亮。一般不会奏效。

问题是background-position-x和background-position-y不是W3C规范。我知道，我自己也遇到过这个问题。

你可以通过手动创建一个计时器并用其配对的x / y值手动重建背景位置来解决这个问题，但是jQuery的animate对你不起作用，因为background-position不是数值。

背景位置动画插件不适合你？

Answer 2

这在FF4中使用“background-position : x, y”而不是2个单独的属性：

$('.trans_bg').css({
    backgroundPosition: "0 0"
});

$('.trans_bg').hover(

function() {
    $(this).stop().animate({
        backgroundPosition: "0 -250"
    }, 500);
}, function() {
    $(this).stop().animate({
        backgroundPosition: "0 0"
    }, 400);
});

http://jsfiddle.net/69hZY/4/

Answer 3

从官方jQuery错误跟踪网站http://bugs.jquery.com/ticket/9621

找到了一个非常好的插件

以下是git hub上插件的链接，解决了我的问题，没有大惊小怪。

http://github.com/louisremi/jquery.backgroundXY.js

只是你知道除非浏览器实现这些属性，否则jquery核心库不会处理它。希望这会有所帮助。

仍然有jQuery背景动画的问题 - 在safari和IE中工作，没有别的！

3 个答案: