自定义动画方法animate()
animate(params,[speed],[easing],[fn])
参数说明:
(1)params: 一个包含样式属性及值的映射,比如{property1: “value1”, property2: “value2”, ····· }
要特别注意所有用于动画的属性必须是数字的,除非另有说明;
这些属性如果不是数字的将不能使用基本的jquery功能。比如常见的,borderwidth、margin、padding、 width、height、fontsize、left、top、right、bottom
等等这些都是能产生动画效果的。
background-color
很明显不可以,因为参数是red或者gbg这样的值,除非用插件,否则正常情况下是没有动画效果的。
(2)speed : 速度参数,可选。三种预定速度之一的字符串(“slow”,“normal”, or “fast”)
或表示动画时长的毫秒数值(如:1000)
(3)easing: 要使用的擦除效果的名称(需要插件支持). 默认jQuery提供"linear"
和 “swing”
.
(4)callback:在动画完成时执行的函数,可选。
单位,属性值的单位默认为像素(px),除非另有说明。单位em 和 %需要指定使用
简单动画
点击class名为box的元素,该元素向右移动;
$(".box").click(function(){
$(this).animate({
left:"300"},3000);
});
累加、累减动画
在之前的基础上加上"+=“或”-=",即表示在当前位置累加或者累减
$