jquery动画背景位置

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

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

取自jQuery上的animate页面:

动画属性和值

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

Answer 3

由于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 +.

我之前在网上做了一个快速演示,如果你需要进一步的指导,你可以把它分开.

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);
    }
});

只要确保不要忘记这一点.在step函数里面.

Answer 5

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

backgroundPosition: '-20px 0px',

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

更新:在我刚刚完成的有限测试中,输入纯数值(不带"px")适用于.animate()方法中的backgroundPosition.换句话说,这有效:

backgroundPosition: '-20 0'

但是,这不是:

backgroundPosition: '-20px 0'

希望这可以帮助.

Answer 6

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

只是为了仔细检查您是否引用了这个后台位置插件？

JSFiddle上带有后台位置插件的示例。