今天在学习使用jquery的动画插件move.js，期间设想了一些使用情形，现在整理出来分享给大家。使用时一定多多注意哦！
Move#add(prop, val)
在这里val的值是一个不带单位的阿拉伯数字，如：
move('.box1').add('margin-top', 50).end();
假如带上了单位px会是什么样子呢？结果就是这一条代码无效，不过也不会报错。如果代码量很大，动画又比较多的话，那就很难找到问题所在了。所以一定要注意哦！
元素的动画如下三种写法都是可以的哦！如：
写法一：
move('.box1').add('margin-top', 50).end();
写法二：
move(".box1").set("margin-left","200px").end(function(){
move(".box1").set("margin-left",0).end(function(){
move('.box1').add('margin-top', 50).end();
});
});
写法三：
move(".box1")
.set("margin-left","200px")
.add('margin-top', 50)
.end();
那么写法三可以像下面这样写吗，把add改为set？
move(".box1")
.set("margin-left","200px")
.set('margin-top', "50px")
.end();
答案是肯定的，二者效果一致。不过此时记得给val带上相应的单位哦。
如果set和add设置的属性一致，比如都是margin-left呢？如：
第一种情形：
move(".box1")
.set("margin-left","200px")
.add('margin-left', 50)
.end();
结果是box1的margin-left值是50px，且是元素直接运动到margin-left:50px的位置。可不是200+50=250哦。
第二种情形：
move(".box1")
.set("margin-left","200px")
.end(function(){
move('.box1').add('margin-left', 50).end();
});
box1会先运动到margin-left:200px的位置，稍作停顿再向右运动 50px，最终margin-left的值是200+50=250px。
不同写法效果不同，一定不要混淆哦。
与Move#add(prop, val)违逆的是sub(prop, val)
这里的val也必须是一个数字。
用法与add一致。不同的是，以margin-left:50为例，add是向右运动50px，sub则是向左运动50px。可以简单的理解为，相同的属性和属性值，add方法和sub方法运动轨迹相反。
Move#duration(n)设置动画持续的时间，一定要有动画才可以哦，不然就没有持续的对象了。如果没有动画只设置duration，虽然不报错，但是没有任何意义。
先设置动画还是先设置duration都可以哦，效果一致：
move(".box2").rotate(270).duration("10s").end();
move(".box2").duration("10s").rotate(270).end();
上面两条代码运行效果一致。
Move#translate(x[, y])
可以写为** Move#to(x[, y])**。
使用时呢，可以接收1个参数，此时表示x轴移动的值；也可以接收2个参数，第一个参数表示X轴移动的值，第二个参数表示y轴移动的值。
如move(".box2").translate(200).end();仅仅水平向右运动200px；
而move(".box2").translate(400,400).end();水平向右运动400px的同时垂直向下运动400px；
如果向下面这样写会是什么效果呢？
move(".box2").translate(200).end();
move(".box2").translate(400,400).end();
结果是第一条代码被覆盖了，没有效果；我们看到的是第二条代码生效。
也许会有小伙伴说可能是运动太快肉眼没看清才会错以为第一条代码没有生效，那么我们可以给第一条代码设置动画持续时间看一下效果：
move(".box2").translate(200).duration("10s").end();
move(".box2").translate(400,400).end();
我们会看到根本没有第一条代码期望的运行10s的动画过程。
Move#translate(x, y)也可以拆开为Move#translateX()和Move#translateY()，如：
move(".box2").translateX(100).translateY(100).end();
其运行效果和move(".box2").translate(100，100).end();一致。
有一点需注意，Move#translateX()、Move#translateY()的X\Y必须大写，小写会报错。
其中，Move#translateX()可以写为Move#x()，Move#translateY()可以写为Move#y()。如
move(".box2").x(100).y(100).end();
一定要记得，Move#x()、Move#y()的x\y必须是小写，大写会报错的。
Move#skew(x[, y])用法和Move#translate(x[, y])类似。
move(".box2").skew(50,50).end();和move(".box2").skewX(50).skewY(50).end();效果一致。
若Move#skew(x[, y])只有一个参数，则表示水平方向的斜切度数，垂直方向斜切度数默认为0.
Move#scale(x[, y])用法和Move#skew(x[, y])一致。
很重要的一点，Move#then([fn])和.pop()要配合使用。如果想要使用then()方法，下面的写法是不会达到预期效果（先水平放大2倍，再垂直放大2倍）的：
move(".box2")
.scaleX(2)
.then()
.scaleY(2)
.end();
上面的代码实际运行效果和move(".box2").scaleX(2).scaleY(2).end();一致，水平和垂直方向同时放大二倍。加上pop()就可以达到预期效果了，如下：
move(".box2")
.scaleX(2)
.then()
.scaleY(2)
.pop()
.end();
要注意，有几个then()就要有几个对应的pop()。
网友评论