jQuery 弹簧式显示隐藏动画

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

 

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

评论列表

  • 评论者头像
    回复

    這個彈性很好啊 HOHO 點開 貌似還有震感 HOHO

    • 评论者头像
      回复

      @沫 嘻嘻,拿来当大横幅,可以吸引人的噢!

  • 评论者头像
    回复

    这个好玩,可以挂横幅广告~

  • 评论者头像
    回复

    挺动感的。

  • 评论者头像
    回复

    脑子闪过一个想法…
    一进网站./..一个部分一个部分的弹出…
    先是header…sidebar.footer最後main
    然後组装成完整的网站…像变形金刚一样…
    不过只是想想…

    • 评论者头像
      回复

      @kkStx 好作品就是来源于好创意,话说这个idea不错 :mrgreen:

  • 评论者头像
    回复

    这个效果不错,很有质感,有点象电影里面开场的时候Logo砸下来的效果

    • 评论者头像
      回复

      @饭哆 电影那个好像还要斜着下来的,改一下更像了!

  • 评论者头像
    回复

    这个效果很棒啊,果断收走了 :wink:

  • 评论者头像
    回复

    分享只是一种美德

  • 评论者头像
    回复

    这个效果还是不错的,需要就来抄抄! :mrgreen:

  • 评论者头像
    回复

    很好。 :oops:

  • 评论者头像
    回复

  • 评论者头像
    回复

    非常好的效果。 :wink:

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail