应用easing插件制作有意思的伸缩效果

发布于,归属于jquery插件沙发还空着,抢! 共有205人围观    

发个演示地址:http://www.36ria.com/demo/dock/

jquery的easing插件是一个非常有用的特效加强插件,利用它可以做出很多非常有意思的动画。

接下来我们看看其实如何利用的

  structure

这是其html结构解析图。原理很简单,一个绝对定位层,设置其top为负值,等到鼠标移到.footer,动画递增到0.

具体的html代码参见实例包。

这里贴出其关键的JS代码

  1. $(document).ready(function() {  
  2.  
  3.     var top = '-' + $('#slidedown_content .content').css('height');  
  4.     var easing = 'easeOutBounce';  
  5.       
  6.     $('#slidedown_top').mouseover(function() {  
  7.         $('#slidedown_content').animate({'top' : 0}, {queue:false, duration:1000, easing: easing});  
  8.     });  
  9.       
  10.     $('#slidedown_bottom').mouseover(function() {  
  11.         $('#slidedown_content').animate({'top' : top}, {queue:false, duration:500, easing: easing});  
  12.     });  
  13.  
  14. });
(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)