.animate()——添加动画

一、写法

写法1：元素.animate({属性:属性值},速度,运动形式,动画完成时执行函数)

多个属性执行顺序：同时执行。如果需要按顺序执行，需要分开写.animate()

$(this).animate({ width: "300px", height: "300px" }, 4000, 'linear', function () { alert(123); });

写法2：元素.animate().animate()

描述：.animate()也可以链式操作，先执行前面的animate在执行后面的animate。如果有.css()则不会按照顺序执行，会直接执行，如果需要最后执行则需要放到回调函数里

$(this).animate({ width:"300px"}, 2000).animate({ height:"300px" }, 2000);

 

二、参数：

　　参数1：运动的属性名和属性值，如果属性名是带“-”的，则改成marginLeft形式

特殊属性名：

scrollTop——距离顶部的距离

　　参数2：时间，单位是毫秒，默认是400

　　参数3：运动的形式，只有两种运动形式 ：swing(慢快慢)， linear(匀速) ，默认swing

　　参数4：回调函数，运动结束后执行的函数

 

三、累加累减

1、+= —— 在当前位置上累加

$(this).animate({ width: "+=300px"}, 4000);

2、-= —— 在当前位置上累减

$(this).animate({ width: "-=300px"}, 4000);