土豆(tudou.com)首页的导航条,当鼠标移到到“社区”菜单时，对应的菜单的弹出效果比较有意思，类似于一个弹球落地的效果，对于有意思的东西，当然要研究研究。有兴趣的朋友可以自己先去看看效果，然后再来看文章。
tudou代码
看了tudou的js代码，发现他们也是使用jquery来实现动画效果的，代码如下：
f.style.height=0;
this.style.visibility="visible";
$(f).animate({height:g},500,"easeOutBounce");
$(i).addClass("hover")
最重要的是上面第三行代码，使用jquery的animate的函数，其中重点就是tudou自定义了animate的easing函数，即easeOutBounce函数，easeOutBounce函数如下。
DEMO
先不分析代码，先用tudou的easeOutBounce函数做个demo看看效果。
demo(该demo在IE下点击没有效果，可能是跟博客园的其他代码有冲突，不想花时间去解决。要在IE下看效果，请copy后面的代码在本地进行测试)：
easing函数
jquery默认定义了2个easing函数，分别是swing和linear,easing函数格式如下：function(o, p, n, r, q)
但对于该几个参数的具体说明，jquery官方也没有文档说明(不知道是否是我没有找到)，经过我看源代码和自己的理解，对几个参数理解如下：
o = p/q
p: 当前时间 - animate开始时间的毫秒值
n: 起始值，一直为0
r: 这个个人认为是递增值，一直为1
q: animate中的duration参数，即设置的动画效果运行完毕需要的时间
返回值：返回1个大于0，小于等于1的百分比值，animate方法通过这个百分比去计算各个参数的值
知道这几个参数的含义后，再看看tudou的easeOutBounce，就发现其第一行代码写的有问题，if ((p /= q) < (1 / 2.75)) 其实可以直接写成 if ((o) < (1 / 2.75)) 。
可以看出tudou的开发人员对easing函数的几个参数也不太理解，不然就不会这样写了(也有可能easeOutBounce函数，tudou也是直接从其他地方copy过来的，呵呵)
[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.
http://www.cnblogs.com/BearsTaR/archive/2010/07/02/tudou_easeOutBounce.html
