在使用了jquery提供的animate这个方法来自定义动画之后,有这么几点感受。
第一点,animate使用起来还是比较灵活的。animate({css样式},slow or fast,callback);方法用起来比较简单。也就是用过第一个花括号里面对选中的操作元素的样式的改变来达到动画的效果。例如:animate({width:'300px'});能将原来的元素的宽度变成300px;animate({width:'+=300px'})是在原有的宽度的基础上加上300p的宽度。
第二点,比较拗口的地方。比如要把元素向右移动300px;代码是animate({left:'300px'});按照常规的想法应该是right:300px呀。但这里的left指的是离左边300px,相当于把元素向右移动了300px;
第三点,为了让运动看起来更加的复杂,可以同时修改多个css属性;比如:
animate({
width:'300pc',
opacity:'0.5',
left:'100px',
........
});
中间用,隔开,而不能像css样式一样用;号。其中还要注意一点就是样式属性的书写格式。比如一般的margin-left,在animate里面就应该写成marginLeft。
第四点,animate可以使用队列功能。也就是先做什么变换,然后再做什么变换。比如
var demo = $("#id");
demo.animate({width:'300px'});
demo.animate({fontSize:'3em'});
知道以上的这四点,自定义一个动画就没什么问题了!