jquery 匀加速 匀减速 加速度
HTML结构
<div class="aa">点击这里查看普通效果跟下面对比</div> <div class="bb">使用 easeInOutCirc 的缓冲过渡效果</div> <div class="cc">easeInQuint 效果 + 回调函数</div> <div class="dd">hide() 方法缓冲消失</div>
CSS代码
.aa,.bb,.cc,.dd{width:300px;background:#ccc;padding:5px;margin-bottom:10px;cursor:pointer;}
JS
$(function(){
$('.aa').click(function(){
$(this).animate({'width':'700'},1000).animate({'width':'300'},1000);
$('.bb').animate({'width':'700'},{duration:1000,easing:'easeInOutCirc'}).animate({'width':'300'},{duration:1000,easing:'easeInOutCirc'});
$('.cc').animate({'width':'700'},{duration:1000,easing:'easeInQuint'}).animate({'width':'300'},{duration:1000,easing:'easeInQuint',complete:function(){ alert('滑回来了'); }});
$('.dd').hide({duration:1000,easing:'easeInQuint'}).show({duration:1000,easing:'easeInQuint'});
});
$('.bb').click(function(){
$(this).animate({'width':'700'},{duration:1000,easing:'easeInOutCirc'}).animate({'width':'300'},{duration:1000,easing:'easeInOutCirc'});
});
$('.cc').click(function(){
$(this).animate({'width':'700'},{duration:1000,easing:'easeInQuint'}).animate({'width':'300'},{duration:1000,easing:'easeInQuint',complete:function(){ alert('滑回来了'); }});
});
$('.dd').click(function(){
$(this).hide({duration:1000,easing:'easeInQuint'}).show({duration:1000,easing:'easeInQuint'});
});
});
注意
//此插件支持第二种写法
$('div').animate({left:'200px'},'bounceinout'); //不支持
$('div').animate({left:'200px'},{easing:'easeInOutBounce'}); //支持
分析此插件：
//要扩展jQuery的速度效果，其实jQuery对外已经提供了一个扩展接口,jQuery.easing jQuery.easing.easeOutBounce=function (x, t, b, c, d) { //参数是jQuery内置参数，具体要翻阅jQuery源码 if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } } $('div').animate({left:'200px'},{easing:'easeOutBounce'});
加速度图表： https://sdeno.com/easings/
