给iquery加了跟jquery差不多的动画接口animate，不过实现上是通过CSS3的transition。

效果点这里 (桌面浏览器只支持webkit内核，如chrome/safari)

iQuery源码

原理

研究了下CSS3的动画Transition，我想如果iphone上要做动画效果的话应该由CSS3实现，不再是传统用js间隔一定时间不断更改数值这样的方式，系统内置的动画实现方式毫无疑性能会高。

CSS3有两个实现动画的方式，Transitions和Animations，Animations自定义程度比较高，但理解起来和用起来会有点别扭，实际上普通动画效果只需要用Transitions就行了，Transitions很好理解：

给元素定义需要渐变转换的属性-webkit-transition-property，和持续时间-webkit-transition-duration

#elem { -webkit-transition-property: width;  -webkit-transition-duration: 1s;  }
接着设置这个元素的width
elem.style.width = “100px”
这个元素就会从原先的宽度逐渐变到100px，持续时间为1s。

简单地说就是告诉它你哪个属性要渐变，持续多长时间，然后你下次改变这个属性时它就会做出动画。

还有一个参数-webkit-transition-timing-function(真够长的)，可以设定动画的缓动，已定义的有”ease linear ease-in ease-out ease-in-out”，除了这些还可以传一个cubic-bezier函数自定义缓动：cubic-bezier(x1, y1, x2, y2)。

有了这些就可以考虑用js控制它，给iquery加上jquery那样的动画接口。

几个问题

看到john resig 08年的一篇文章：http://ejohn.org/blog/css-animations-and-javascript 原来有人早就想做这方面的工作了，不过john resig给出了几个不做的理由：

1. 不能停止动画
2. 没法做出每一步动画的回调(jquery里的onstep)
3. 没办法同步各个动画
4. 没办法自定义缓动函数

对于问题1，transition动画过程中通过elem.style获得的会是最终值，而通过getComputedStyle获得的是运动过程中的值，这样就可以实现stop了，只要getComputedStyle把当前值拿出来再赋一次，再取消transition，就成了。

对于问题4，可以通过传入cubic-bezier曲线实现自定义缓动，这个没具体研究，有什么限制就不知道了~

问题3我没看出他的意思，现在各个动画是可以同步执行的。问题2目前就没办法了，不知现实中用到onstep的机会多不多？

目前这个动画接口桌面浏览器只支持webkit内核的，其实加几行代码就可以支持firefox和opera的，不过iQuery是针对iOS和Android的，就不加了。iQuery没有经过大量测试，现在应该还是不靠谱，找时间用它做一个像样的应用，边做边找里面的bug~