Question

我似乎无法使其发挥作用。

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

高度和宽度有生命但不是背景。

Answer 1

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

$('.pop').animate({
  'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

Answer 2

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

取自animate page on jQuery：

动画属性和值

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

Answer 3

由于jQuery不支持开箱即用，我到目前为止遇到的最佳解决方案是在jQuery中定义自己的CSS hooks。从本质上讲，这意味着定义自定义方法来获取和设置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 +。

我之前在网上放了一个快速的demo，如果你需要进一步的指导，你可以把它分开。

Answer 4

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

例如，要将背景位置从背景位置（0px 0px）设置为背景位置（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);
    }
});

请确保不要忘记步骤功能中的 this。。

Answer 5

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

backgroundPosition: '-20px 0px',

但是，在.animate（）方法（以及类似方法）中列出要更改的各种属性时，花括号之间列出的最后一个参数后面不应该有逗号。我不能说这是不是为什么背景位置没有改变，但这是一个错误，我建议修复。

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

backgroundPosition: '-20 0'

然而，这不是：

backgroundPosition: '-20px 0'

希望这有帮助。

Answer 6

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

要解决它，只需包含Background Position Plugin，您就可以随意设置背景动画。

Answer 7

你也可以使用数学组合＆＃34; - =＆＃34;移动背景

$(this).animate( {backgroundPositionX: "-=20px"} ,500);

Answer 8

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

要进行仔细检查，您是否引用了background position插件？

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

Answer 9

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

Answer 10

我有一个div My_div 250px x 250px，背景图片也是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);
});

我希望它有所帮助

Answer 11

使用Firefox：
指定两个值：不能与语法的任何组合一起使用 - 正如上面指出的那样。使用Firebug，我得到“解析'背景位置'的值时出错。声明掉线了。”直到动画结束。

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

Answer 12

function getBackgroundPositionX(sel) {
    pos = $(sel).css('backgroundPosition').split(' ');
    return parseFloat(pos[0].substring(0, pos[0].length-2));
}

返回[x]值。数量的长度无关紧要。可以是例如9999或0。

jquery动画背景位置

12 个答案:

动画属性和值