jQuery animate()方法 操作 background-position

1、首先，要知道的是，不是所有css属性都可以用Jquery动画（animate方法）来动态改变。关于这点，w3school描述如下： 关于animate()方法支持的css属性，w3school罗列了可能的 CSS 样式值 并 提供了实例：http://www.w3school.com.cn/jquery/effect_animate.asp

2、animate()的语法：

$(selector).animate(styles,speed,easing,callback)

注释：CSS 样式使用 DOM 名称（比如 “fontSize”）来设置，而非 CSS 名称（比如 “font-size”）

3、w3school罗列的css属性中有 backgroundPosition，但是按照 animation()的语法使用了之后，发现不起作用：

（在使用backgroundPosition属性的时候，注意属性值中间有个空格，连接字符串作为属性值的时候注意不要漏掉；虽然这个问题注意到了，但是结果还是不起作用）

$('.scroller').animate({ "backgroundPosition":"100px center" },1000);

但是同样是backgroundPosition属性，用 jQuery css() 是可以的。

4、百度搜索了一顿，上找到一篇文章：https://blog.csdn.net/fungleo/article/details/48289647，里面提到的写法：

backgroundPositionX:100px, backgroundPositionY:200px

试了一下，果然可以了！原内容来源于知乎：https://www.zhihu.com/question/20611410

最后的实战代码：

navLiClick:function(index){ /*nav项点击效果*/ var leftnum = ''; if(index == 0){ leftnum = .1 + 'rem'; }else{ leftnum = .74*index +.3*[1+2*(index-1)] + .1 + 'rem'; } $('.scroller').animate({ "backgroundPositionX":leftnum },200,'swing'); }

小结一下：

看了一下知乎上的原内容来源，发现这种方法不是很靠谱，部分浏览器支持的不是很理想（webkit下支持了，但是FF和Opera又不行了），关于解决方法也有提到：

用原生JS去写推荐用插件（提到的一个插件：animateBackground-plugin.js）

暂且先到这儿吧，有时间再去试一下！