Animation

effect 效果

http://www.iciba.com/effect

animation

http://iciba.com/animation

目录

1. 回调函数
2. 动态参数（重载？）
3. setTimeout 的运行原理
4. 网页中动画的实现方式
5. $node.animate()

回调函数 callback

一种特殊应用场景的函数

维基百科：通过函数参数传递到其它代码的，某一块可执行代码的引用​

通俗理解：给别人调用的函数

无参数 http://js.jirengu.com/coz/1/edit

有参数 http://js.jirengu.com/coz/2/edit

动态参数

console.log(1)  console.log(1,2,3,...)

参数对象：arguments

1. 伪数组
2. 可读写（但是建议不要写）

http://js.jirengu.com/xux/1/edit

setTimeout 的运行原理

如何调用：

关于 delay

1. 单位是毫秒 ms
2. 不保证一定是在指定的时间运行
3. 一定是执行异步的
4. 最小 delay 不一定是 0

var timeoutId = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutId = window.setTimeout(code, [delay]);

var timeoutId = window.setInterval(func, [delay, param1, param2, ...]);
var timeoutId = window.setInterval(code, [delay]);

http://js.jirengu.com/hic/2/edit

setTimeout 的运行原理

如何停止：

嵌套的 timeout

window.clearTimeout(timeoutId)

window.clearInterval(timeoutId)

var number = 1000
setTimeout(function step(){
    number--
    if(number > 0){
        console.log(number)
        setTimeout(step,1000)
    }else{

    }
}, 1000)

网页中动画的实现方式

1. 连续运动的图片/GIF
2. 不停的改变 DOM 的属性（位置、大小）/CSS3

缓动（easing functions）

不要直来直往，更自然

Demo

实现参考

$node.animate

一种兼容性较高的动效 API

doc

.hide('slow')

完

下一节课《jQuery 插件基础》

预习《jQuery插件开发》