jquery弹簧式动画拓展

最新推荐文章于 2024-09-14 18:52:56 发布

dhuvp42282

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/starweb/archive/2013/01/20/2868447.html

版权

// 扩展过渡效果到 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');
            });
    });