59

我似乎无法让这个工作。

$('#product_family_options_dd').animate({
  height: '300px',
  width: '900px',
  backgroundPosition: '-20px 0px',          
},

高度和宽度动画但不是背景。

4

12 回答 12

96

如果您只使用这样的单独值，则不需要使用背景动画插件：

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');
于 2011-10-08T00:28:43.643 回答
40

我想这可能是因为它期待一个单一的价值？

取自jQuery 上的动画页面：

动画属性和值

所有动画属性都应动画为单个数值，除非以下说明；大多数非数字属性无法使用基本的 jQuery 功能进行动画处理。（例如，宽度、高度或左侧可以设置动画，但背景颜色不能设置。）除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。

于 2011-03-02T17:29:06.873 回答
35

由于 jQuery 不支持这个开箱即用，到目前为止我遇到的最好的解决方案是在 jQuery中定义自己的CSS 钩子。本质上，这意味着定义自定义方法来获取和设置 CSS 值，这也适用于 jQuery.animate()。

在 github 上已经有一个非常方便的实现： https ://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js

有了这个插件，你可以做这样的事情：

$('#demo1').hover(
  function() {
    $(this).stop().animate({
      backgroundPositionX: '100%',
      backgroundPositionY: '100%'
    });
  },
  function () {
    $(this).stop().animate({
      backgroundPositionX: '105%',
      backgroundPositionY: '105%'
    });
  }
);

对我来说，这适用于迄今为止测试过的所有浏览器，包括 IE6+。

不久前我确实在网上放了一个快速演示，如果您需要进一步的指导，您可以将其撕开。

于 2013-01-08T15:46:52.687 回答
9

jQuery 的 animate 函数并非专门用于直接为 DOM 对象的属性设置动画。您还可以补间变量并使用 step 函数来获取补间每个步骤的变量。

例如，要将背景位置从 background-position(0px 0px) 动画化到 background-position(100px 500px)，您可以这样做：

$({temporary_x: 0, temporary_y: 0}).animate({temporary_x: 100, temporary_y: 500}, {
    duration: 1000,
    step: function() {
        var position = Math.round(this.temporary_x) + "px " + Math.round(this.temporary_y) + "px";
        $("#your_div").css("background-position",  position);
    }
});

只要确保不要忘记这个。在 step 函数内部。

于 2013-04-05T10:24:26.507 回答
5

在您的 jQuery 代码中，在 backgroundPosition 部分之后有一个逗号：

backgroundPosition: '-20px 0px',

但是，当列出要在 .animate() 方法（和类似方法）中更改的各种属性时，大括号之间列出的最后一个参数后面不应有逗号。我不能说这是否是背景位置没有改变的原因，但这是一个错误，我建议修复。

更新：在我刚刚完成的有限测试中，输入纯数值（不带“px”）适用于 .animate() 方法中的 backgroundPosition。换句话说，这有效：

backgroundPosition: '-20 0'

但是，这不会：

backgroundPosition: '-20px 0'

希望这可以帮助。

于 2011-06-19T09:55:54.297 回答
3

您还可以使用数学组合“-=”来移动背景

$(this).animate( {backgroundPositionX: "-=20px"} ,500);
于 2013-03-04T14:43:39.873 回答
3

您不能使用简单的 jquery 的 Animate 来执行此操作，因为它涉及 2 个值。

要解决它，只需包含背景位置插件，您可以随意为背景设置动画。

于 2011-07-13T15:18:19.503 回答
2

您可以使用 setInterval 方法更改图像背景位置，请参见此处的演示：http: //jquerydemo.com/demo/animate-background-image.aspx

于 2013-02-20T22:50:55.343 回答
2

尝试backgroundPosition:"(-20px 0)"

只是为了仔细检查你是否引用了这个背景位置插件？

JSFiddle上带有背景位置插件的示例。

于 2011-03-02T17:26:20.710 回答
0

I have a div My_div 250px x 250px, a background image also 250 x 250

css:

#My_div {
    background: url("..//img/your_image.jpg") no-repeat;
    background-position: 0px 250px;
}

javascript:

$("#My_div").mouseenter(function() {
    var x = 250;
    (function animBack() {
        timer = setTimeout(function() {
            if (x-- >= 0) {
                $('#My_div').css({'background-position': '0px '+x+'px'});;
                animBack();
            }
        }, 10);
    })();

});
$("#My_div").mouseleave(function(){
    $('#My_div').css({'background-position': '0px 250px'}); 
    clearTimeout(timer);
});

I hope it help

于 2015-01-30T10:26:32.663 回答
-1

使用 Firefox：
指定两个值：不适用于任何语法组合——正如上面提到的。使用 Firebug，我得到“解析 'background-position' 的值时出错。声明已删除。” 直到动画结束。

'backgroundPosition': '17.5em' -- 指定 1 值：适用于 FF 和 CHrome OPera、SF(Safari) 和 IE，但需要注意的是第二个值或 y 位置（垂直）设置为“中心”。在 Firebug 中，元素的样式设置为：
style="background-position: 17.5em center;"

于 2012-12-02T22:06:12.617 回答
-3 
function getBackgroundPositionX(sel) {
    pos = $(sel).css('backgroundPosition').split(' ');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

这将返回 [x] 值。数字的长度没有问题。可以是例如 9999 或 0。

于 2012-01-04T20:33:55.713 回答