使用 jquery.easing.js 增强动画过渡效果 Demo 页面

效果

点击这里查看普通效果跟下面对比
使用 easeInOutCirc 的缓冲过渡效果
easeInQuint 效果 + 回调函数
hide() 方法缓冲消失

代码

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'});
		});
	
	});
神说:有代码的文章要有一个 Demo,于是就有了 Demo。 包养本人>>