jQuery 弹簧式显示隐藏动画

时间：2012年4月29日分类：JavaScript 标签：jQuery‚ 动画评论：19

弹簧式显示隐藏动画，听上去好像有点复杂，其实就是模拟弹球落地的效果，很久之前想到了，无奈当时 jQuery 以及 JavaScript 技术仍未学好，木有办法做出很好的效果。前些天突然又想做，便写出来了，先放上 Demo 。

看完 Demo ，应该放上代码了，在介绍代码前，给大家介绍一下 jQuery .animate 方法的 easing （过渡）参数，相对于 styles, speed ，这个参数用得比较少， jQuery 中默认的动画方法 hide() , show() , slideDown() , slideUp() , fadeIn() , fadeIn() 也是基于 .animate 的 styles, speed 参数便可实现，而 easing 则可以用于实现更丰富的动画效果。 easing 的值可以采用 jQuery UI Effects 中提供的过渡效果，这里 Kayo 直接提取了一种过渡效果扩展到 jQuery 而不加载整个 jQuery UI 库了。

下面放上代码：

1.加载 jQuery 库

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

2.HTML

<div class="spring">
	<p>动画 Demo</p>
	<span class="button">Click Me!</span>
</div>

3.CSS

body, div, p {margin: 0; padding: 0; }
.spring {text-align: center; height: 450px; }
.spring p {background: #f6f6f6; color: #444; font-size: 50px; padding: 100px 0;  }
.spring .button {display: block; padding: 10px 0; }

4.JavaScript

// 扩展过渡效果到 jQuery
jQuery.extend(jQuery.easing,{
        def : "easeOutQuad",
        swing : function(c, a, b, d, e) {
            return jQuery.easing[jQuery.easing.def](c, a, b, d, e)
        },
        easeOutBounce: function(c, a, b, d, e) {
            return (a /= e) < 1 / 2.75 ? d * 7.5625 * a * a + b: a < 2 / 2.75 ? d * (7.5625 * (a -= 1.5 / 2.75) * a + 0.75) + b: a < 2.5 / 2.75 ? d * (7.5625 * (a -= 2.25 / 2.75) * a + 0.9375) + b: d * (7.5625 * (a -= 2.625 / 2.75) * a + 0.984375) + b
        }
});
// 实现动画
$(function(){
	var springSpeed = 600; // 动画速度
	var theSpringHeight = $('.button').offset().top;
	$('.spring').css({marginTop: -theSpringHeight});
	$('.button').toggle(function(){
		$('.spring').animate({marginTop: 0}, springSpeed, 'easeOutBounce');
	}, function(){
		$('.spring').animate({marginTop: -theSpringHeight}, springSpeed, 'easeOutBounce');
	});
});

本文由 Kayo Lee 发表，本文链接：https://kayosite.com/jquery-spring-animate.html

评论列表

沫
2012-4-29 17:52 回复

這個彈性很好啊 HOHO 點開貌似還有震感 HOHO
- Kayo
  2012-4-29 18:01 回复
  
  @沫嘻嘻，拿来当大横幅，可以吸引人的噢！
刘印博客
2012-4-29 19:10 回复

这个好玩，可以挂横幅广告~
- Kayo
  2012-4-29 23:17 回复
  
  @刘印博客而且还是充满弹性的广告~
小宇宙-ChalW
2012-4-29 22:18 回复

挺动感的。
kkStx
2012-5-01 22:45 回复

脑子闪过一个想法…
一进网站./..一个部分一个部分的弹出…
先是header…sidebar.footer最後main
然後组装成完整的网站…像变形金刚一样…
不过只是想想…
- Kayo
  2012-5-02 0:21 回复
  
  @kkStx 好作品就是来源于好创意，话说这个idea不错
  - kkStx
    2012-5-02 0:24 回复
    
    @Kayo 這算是把FLASH jQuery化吧
    - Kayo
      2012-5-02 0:33 回复
      
      @kkStx 正是，不过得修炼多N年的jQuery才有此功力了！
饭哆
2012-5-02 0:06 回复

这个效果不错，很有质感，有点象电影里面开场的时候Logo砸下来的效果
- Kayo
  2012-5-02 0:27 回复
  
  @饭哆电影那个好像还要斜着下来的，改一下更像了！
老谢
2012-5-02 7:31 回复

这个效果很棒啊，果断收走了
- Kayo
  2012-5-02 21:37 回复
  
  @老谢闲来折腾出的产物，有用就好
青浦招聘
2012-5-03 14:40 回复

分享只是一种美德
小呆
2012-5-07 11:53 回复

这个效果还是不错的，需要就来抄抄！
- Kayo
  2012-5-07 22:39 回复
  
  @小呆欢迎欢迎！
deepsea
2014-10-17 14:13 回复

很好。
为
2015-3-05 10:29 回复

为
老张
2015-3-05 10:31 回复

非常好的效果。