jQuery Animate backgroundPosition无法正常工作
我试图动画一些div的背景位置，然后是一个回调动画，它做同样的事情。
我在这里想念的是什么？
HTML：
CSS：
.divimg { width:250px; height:250px; margin:20px; float:left; background-size: 500px 500px; background-position: top center; background-repeat: no repeat; background-image: url(http://lorempixel.com/186/116/nature/1); }
JavaScript的：
$(function() { function animateGrid() { $('.divimg').animate( {backgroundPosition:"bottom center"}, 500, function() { $('.divimg').animate( {backgroundPosition:"top center"}, 500) } ); } animateGrid(); })
http://jsfiddle.net/jc6212/WPF6H/2/
来自.animate()文档 ：
除非如下所述，否则应将所有动画属性设置为单个数值。 […]不完全支持速记CSS属性（例如字体，背景，边框）。
要在您执行操作时仅设置backgroundPositionY动画，您可以在Chrome中为该属性设置动画。 由于Firefox不支持backgroundPositionY ，您可以为不支持它的浏览器应用CSS Hook ：
if (!('backgroundPositionY' in document.createElement('div').style)) { $.cssHooks.backgroundPositionY = { get: function(elem, computed, extra) { return $.css(elem, 'backgroundPosition').split(' ')[1]; }, set: function(elem, value) { elem.style.backgroundPosition = $.css(elem, 'backgroundPosition').split(' ')[0] + ' ' + value; } }; } $(function() { function animateGrid() { $('.divimg').animate({ backgroundPositionY: 250 }, 500, function() { $('.divimg').animate({ backgroundPositionY: 0 }, 500); }); } animateGrid(); });
在Chrome，FF，IE9中测试过。 应该适用于所有浏览器。