jQuery+easing 动画效果

官网:http://gsgd.co.uk/sandbox/jquery/easing/
文档教程:http://www.js8.in/451.html
http://willin.me/develop/jquery/jquery-easing-v13/
演示:http://jqueryui.com/demos/effect/easing.html
搜索引擎中搜索 jquery easing ,会有很多非常出人意表的应用,以及案例,推荐!

方法介绍:

  • def:默认方式设置
  • swing:默认方式加载
  • Quad:二次方缓动(t)
  • Cubic:三次方缓动
  • Quart:四次方缓动
  • Quint:五次方缓动
  • Sine:正弦曲线缓动
  • Expo:指数曲线缓动
  • Circ:圆形曲线的缓动
  • Elastic:指数衰减的正弦曲线缓动
  • Back:超过范围的三次方缓动
  • Bounce:指数衰减的反弹缓动

关于In、Out、Inout的说明:

  • easeIn:加速度缓动;
  • easeOut:减速度缓动;
  • easeInOut:先加速度至50%,再减速度完成动画。

缓动方式的翻译来自:JavaScript Tween算法及缓动效果

原创文章,转载请注明出处:heluyao的博客

【在jquery中的用法】
jquery方法:slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle
        $(element).slideUp(duration,easing,[callback]);
        
jquery方法:fadeTo
        $(element).fadeTo(duration,opacity,easing,[callback]);
        
jquery方法:animate
        $(element).animate({properties},duration,easing,callback);
        
        // 或者这样也行
        $(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});
        
        // 或者
        jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});
        
        
【demo】