发个演示地址:http://www.36ria.com/demo/dock/
jquery的easing插件是一个非常有用的特效加强插件,利用它可以做出很多非常有意思的动画。
接下来我们看看其实如何利用的
这是其html结构解析图。原理很简单,一个绝对定位层,设置其top为负值,等到鼠标移到.footer,动画递增到0.
具体的html代码参见实例包。
这里贴出其关键的JS代码
- $(document).ready(function() {
- var top = '-' + $('#slidedown_content .content').css('height');
- var easing = 'easeOutBounce';
- $('#slidedown_top').mouseover(function() {
- $('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});
- });
- $('#slidedown_bottom').mouseover(function() {
- $('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});
- });
- });


