效果
点击这里查看普通效果跟下面对比
使用 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'}); }); });