jquery匀加减速效果easing.js

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/

jquery.easing.js
jquery.easing.1.3.min

jquery.easing.1.3