Jwalk Method

在介绍关于Jwalk方法之前，我们先根据上一步的操作，来实例化一个对象，var A = Jwalk(element);

Animate:

animate用于对于动画的初始化操作，不会自动执行。该方法会返回this对象，可以实现链式操作，后面添加play/replay/cycle方法执行。
animate接收4个参数，（css样式，动画执行的时间，动画效果，回调函数）
写法方式与jquery相同，可以简写为animate(样式,时间,回调)，或者animate(样式,动画效果,回调)以及animate(样式,回调)，参数不设置的话采用默认参数，不同于jquery的地方是回调函数的写法。
回调函数接收一个参数data（自定义名称），这是一个包含有动画状态及样式的对象，通过data.status来获取当前这个animate的状态。（支持start开始,pause暂停,process执行中,end结束）4种不同状态，在初始化的时候不开启openProcess则data.status == 'process' 永远不会触发。
后面是一段完整的代码：

A.animate({left:'+=100px'},500,'ease-in',function(data){
		switch (data.status){
			case 'start' :
				console.log('动画开始');
				break;
			case 'process' :
				console.log('动画进行中');
				break;
			case 'pause' :
				console.log('动画暂停喽');
				break;
			case 'end' : 
				console.log('动作结束啦');
				break;
		}
	}).play();
						

Play:

（无参数，不可级联）比较简单，开始执行动画。一般跟在animate或者step的后面，或者单独调用。
动画暂停后，执行play()会继续暂停的动画。与replay有区别。

Replay:

（无参数，不可级联）如果动画暂停了，执行play()会继续刚才的动画，但是执行replay()会在当前暂停的地方，重新开始一次动画。

Pause:

（无参数，不可级联）动画暂停，执行pause()后，无论动画执行到任何地方都会停止动画，停止动画后执行play()方法会继续动画。

Stop:

（无参数，不可级联）动画停止执行，不同于pause方法，执行stop()后动画不是立即停止，而是停止与某个animate的end处，即把当前这个animate执行完后才会停止。停止后用play方法实现继续动画。
例如当前有5个animate已经在执行了，在第三个执行过程中，我触发stop()，该动画仍然会执行，直到第三个动画执行完，然后动画停止。如果我在过程中执行pause()的话，那么动画就在当前时间停止了。

Reset:

（无参数，不可级联）动画重置，实际上是把element的样式重置，只会还原最后一次动画初始化时的样式。
比如同一个实例中，我执行A.animate(样式一).play()，然后reset()，这时会还原到样式一之前的样式;
然后如果我继续执行A.animate(样式二).play()，如果再次reset的话，不会还原到样式一之前的样式了，而是会还原到样式二之前的样式。只有重置animate才会触发这种情况，执行play/pause/stop/step等都不会覆盖reset中的样式。

Step:

（返回this对象，接收参数，可级联）动画会按照step中定义的顺序执行动画。
执行step时首先要有一组顺序动画：A.animate(样式一).animate(样式二).animate(样式三).animate(样式四) 如果step中是一组数字比如A.step(3,1,0,2).play()那么样式的设置顺序就是（样式四>样式二>样式一>样式三）
或者我也可以这样执行A.step(2).play()，那么只会执行样式三。
使用step方法这里有几点需要注意：

• step中的步骤是从0开始的。
• step中定义的动作如果不存在，多步的话该步骤会被跳过。如果是单步，不会执行。
• step不会自动执行，需要后面添加play()/replay()/cycle()来触发动画
• step优先级高于animate，如果在某个animate的回调函数中执行了step，该animate链中后面的animate会被打断。

Cycle:

（接收参数，不可级联）循环执行动画，可以接收参数：执行次数。如果不设置参数或者设置次数为0，那么会进行无限循环。
A.cycle(10);代表执行10次。
触发循环，第一次直接可以调用cycle方法，如果动画被pause/stop了，需要使用play方法继续动画，如果使用cycle会进入新一轮的循环。

Width/Height:

（无参数，不可级联），这个使用起来很简单了。获取某个元素的width或者height值(去除padding,border后的宽高)，支持获取隐藏的元素，以及高度为0但是实际高度大于0的元素的宽高。
比如我这里隐藏着一段代码，通过管理员工具可以查看。无width/height，我点击后面按钮。

var $ = function(id){ return document.getElementById(id) || id };
function msg(elem){
	var codeObj = Jwalk($(elem));
	alert (codeObj.width()+'\n'+codeObj.height());
};

Toggle/Hide/Show:

（接收参数，不可级联）使用过jquery的朋友对这个方法应该非常熟悉了，这里的调用与jquery一样，A.toggle()淡入淡出的方式在显示和隐藏状态间切换，hide()隐藏元素，show()显示元素。
接收两个参数，第一个是时间，第二个是结束后的回调函数。不设置时间的话采用默认400ms

slideToggle/slideUp/slideDown:

（接收参数，不可级联）同样是与jquery相同的用法，A.slideToggle()使用滑动效果在显示和隐藏状态间切换。slideUp向上滑动/slideDown向下滑动，接收参数方式同toggle。

Extend:

（接收参数，不可级联）扩展方法，使用该方法可以添加自定义的动画效果。
Jwalk中的hide/show/slideToggle等方法就是通过extend()实现的，所以也可以通过修改Jwalk.js脚本自己添加后压缩使用。

Jwalk中还有一个init()方法，是用来初始化动画过程中的一些变量的。如果不涉及开发扩展函数的话，不要轻易使用该方法。init会返回当前对象，可以链式操作。

hide : function () {
	var speed = (arguments.length > 0 && typeof arguments[0] != 'function') ? arguments[0] : 'normal',
		callback = ( arguments.length > 0 ) ? arguments[arguments.length-1] : null;
	_this._act({opacity:'0'},speed,function(){
		_this.elem.style.display = 'none';
		if(callback && typeof callback === 'function'){
			callback();
		};
	});
}

上面的hide方法就是通过extend扩展实现的。其中用到了封装的一个_act方法，该方法会初始化Jwalk中的变量，然后监听回调函数为data.status == 'end' 的时候执行传入的回调函数。代码部分比较简单。大家可以查看源代码。