jQuery 1.6:backgroundPosition与backgroundPositionX和FF​​4兼容性 [英] jQuery 1.6: backgroundPosition vs backgroundPositionX and FF4 compatibility

问题描述

在尝试将jQuery插件'iCheckbox'(http://stackoverflow.com/questions/6032538/)升级到jQuery 1.4.4以上版本时，我发现使用了

 animate({backgroundPosition:'10px 0px'})

需要更改为

animate({backgroundPositionX: '10px', backgroundPositionY:  '0px'})

，因为仅应使用带有一个参数的属性.到目前为止，这是有道理的，但是请稍等..虽然它在Safari和Chrome中可以正常工作，但在FF4(在Mac上都是这样)中无法工作.

所以我尝试了这个，最后发现，如果我将其更改为

animate({backgroundPosition: '10px'})

它无处不在！ 但是，这是怎么回事?现在，我只给出一个参数，它可以工作，但是我没有指定它是用于X轴还是Y轴(因此它似乎默认为X轴.但是，如果我希望它在Y轴上工作怎么办?)

这似乎很奇怪，我在这里的解决方案不是正确的方法..所以我需要一些建议:

这是怎么回事?

应该如何使用jQuery 1.4-1.6设置背景位置的动画效果，以便在浏览器中正常工作?

解决方案

首先，JQuery无法同时为两个值设置动画，因此您发现为backgroundPosition输入两个值根本不起作用.另外请注意，对于px值， JQuery文档鼓励您不要编写px.

第二，backgroundPositionX和backgroundPositionY是非标准 CSS属性，仅在少数浏览器中受支持，最著名的是IE和最近的Webkit，这就是为什么您会发现它在以下浏览器中不起作用的原因FF或Opera. (请参见此处.)

我发现在大多数浏览器中，混合使用JQuery的animate和CSS过渡可以使一个轴上的背景图像动起来.我将引用另一个问题的答案( jQuery.animate background-position ):

分别使用JQuery的.animate()和backgroundPositionX和Y IE(适用于最新的JQuery).然后在浏览器中 支持CSS过渡(除了IE之外几乎所有其他东西)，请使用 .css()而不是.animate()来更改背景位置并进行设置 样式表中的CSS过渡.

您将使用上述内容涵盖大多数浏览器，但可能不是AS 就像使用插件一样兼容.在这里查看工作: http://jsfiddle.net/lucylou/dVpjh/

In an attempt to upgrade the jQuery plugin 'iCheckbox' (http://stackoverflow.com/questions/6032538/) to work above jQuery 1.4.4 I found out that the use of

 animate({backgroundPosition:'10px 0px'})

needed to be changed to

animate({backgroundPositionX: '10px', backgroundPositionY:  '0px'})

as only properties with one parameter should be used. So far, this makes sense, but wait.. while it's working fine in Safari and Chrome, it's not working in FF4 (all on Mac)..

So i tried this and that and finally found out that if I change it to

animate({backgroundPosition: '10px'})

It works everywhere! But what's going on here? Now that I just give one parameter, it works, but I'm not specifying if it's for X or Y axis (so it defaults to X axis it seems.. but what if I want it to work on Y axis?)

This seems wierd, and my solutions here can't be the correct way of doing it.. so I need some advice:

What's going on?

How should background position be animated using jQuery 1.4 - 1.6 so that it works across browsers?

解决方案

Firstly, JQuery is unable to animate two values at the same time, thus you saw that inputting two values for backgroundPosition did not work at all. Also note that for px values, the JQuery documentation encourages you to not write the px.

Secondly, backgroundPositionX and backgroundPositionY are non-standard CSS properties only supported in a few browsers, most notably IE and recently Webkit, which is why you will find it does not work in FF or Opera. (See here.)

I have found that mixing JQuery's animate and CSS transitions works to animate a background image on one axis in most browsers. I will quote from my answer to another question ( jQuery.animate background-position):

Use JQuery's .animate() and backgroundPositionX and Y separately for IE (this will work with the latest JQuery). Then in browsers that support CSS transitions (nearly everything besides IE), use .css() instead of .animate() to change the background position and set a CSS transition in your stylesheet.

You'll be covering most browsers with the above, but it may not be AS compatible as just using a plugin. See it at work here: http://jsfiddle.net/lucylou/dVpjh/

这篇关于jQuery 1.6:backgroundPosition与backgroundPositionX和FF​​4兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！