您的位置:首页 > Web前端 > JQuery

jquery弹簧式动画拓展

2013-01-20 13:12 260 查看
// 扩展过渡效果到 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');
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: