jQuery Animate backgroundPosition 不起作用答案

【问题标题】：jQuery Animate backgroundPosition not workingjQuery Animate backgroundPosition 不起作用
【发布时间】：2012-11-18 17:59:42
【问题描述】：

我正在尝试为某些 div 的背景位置设置动画，然后是一个回调动画。

我在这里缺少什么？

HTML：

<div>
    <div class='divimg'></div>
    <div class='divimg'></div>
    <div class='divimg'></div>
</div>

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/

【问题讨论】：

已知 jQuery 不能正确地为复合/文本值属性设置动画，但可以解决。
在 Chrome 中，可以使用 this 之类的东西，对于 Firefox，您必须创建一个 CSS Hook。
我明白了，所以对于 jQuery 动画，坚持使用整数而不是文本值属性是一种更好的做法。无论如何更改值都会更容易 - 谢谢

标签： jquery jquery-animate background-position

【解决方案1】：

来自.animate() docs：

所有动画属性都应动画为单个数值，除非以下说明； [...] 不完全支持速记 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 中测试。应该适用于所有浏览器。

jsFiddle

【讨论】：