jQuery Easing的使用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }
span.s2 { color: #4b7318 }
ul.ul1 { list-style-type: none }

jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:

  • properties:一组包含作为动画属性和终值的样式属性和及其值的集合
  • duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
  • easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
  • complete(可选):在动画完成时执行的函数

其中参数easing默认有两个效果:"linear"和"swing",如果需要更多效果就要插件支持了,jQuery Easing Plugin提供了像"easeOutExpo"、"easeOutBounce"等30多种效果,大家可以点击这里去看每一种easing的演示效果,下面详细介绍下其使用方法及每种easing的曲线图。

<</span>script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></</span>script>
<</span>script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></</span>script>  

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
li.li1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }
ul.ul1 { list-style-type: none }

引入之后,easing参数可选的值就有以下32种:

  • linear
  • swing
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

当然一般一个项目中不可能会用到这么多效果,为了减少代码冗余,必要时可以不用引入整个jquery.easing.1.3.js,我们可以只把我们需要的几种easing放入Javascript文件中,如项目中只用到"easeOutExpo"和"easeOutBounce"两种效果,只需要下面的代码就可以了

jQuery.extend( jQuery.easing,
{
    easeOutExpo: function (x, t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeOutBounce: function (x, t, b, c, d) {
        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;
        }
    },
});  

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }

使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:

$(myElement).animate({
    top: 500,
    opacity: 1
}, 1000, ‘easeOutBounce‘);  

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }
span.s2 { color: #4b7318 }

值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:

$(myElement).animate({
    left: [500, ‘swing‘],
    top: [200, ‘easeOutBounce‘]
});  

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }

也可以用另外一种写法

$(myElement).animate({
    left: 500,
    top: 200
}, {
    specialEasing: {
        left: ‘swing‘,
        top: ‘easeOutBounce‘
    }
});  

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }

使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:

$(myElement).slideUp(1000, method, callback});
$(myElement).slideUp({
    duration: 1000,
    easing: method,
    complete: callback
}); 

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px Verdana; color: #494949 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Verdana; color: #494949 }
span.s1 { }

jQuery easing 图解

以下图解可以让你更容易理解每一种easing的效果

如果你使用 jQuery 1.4 以上的版本,还可以这样:

$(element).animate({
  width:[200, ‘easeInOutBack‘],
  height:[200, ‘easeOutBack‘]
},1000);

转自:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html

时间: 2024-10-10 21:34:48

jQuery Easing的使用的相关文章

网站建设中前端常用的jQuery+easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery.easing.1.3.js jquery.easing.compatibility.js 该插件美化排版后是130行左右,压缩后更小.这个插件弥补了jquery里面的动画效果的不足,是其动画效果更加强悍. X轴表示时间,Y轴表示的是动画效果的变化.查看这些曲线变化,更利于掌握这个插件的效果. 插件支

JQuery强化教程 —— jQuery Easing

从jQuery API 文档中可以知道,jQuery自定义动画的函数. animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串 ("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)

jQuery easing动画效果扩展

引入Easing js文件 <script src="js/jquery.min.js"></script> <script src="js/jquery.easing.min.js"></script> 使用jQuery Easing $(element).slideUp({ duration: 1000, easing: method, complete: callback }); 参数duration:定义动画速

jQuery Easing 使用方法

转自:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html 从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "

jQuery Easing 使用方法及其图解

原文地址:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html 从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", &quo

jQuery easing 插件使用方法

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) e

jquery.easing.js的使用

jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数 box点击就会像移动出弹簧效果,$(obj).animate(目的状态,时间,回调函数) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="tex

jQuery Easing 使用方法及其图解(转载)

jQuery Easing 使用方法及其图解 从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast"

Jquery Easing函数库

从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) e