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、百度搜索了一顿,CSDN上找到一篇文章: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)
暂且先到这儿吧,有时间再去试一下!