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

网站建设中前端人员利用jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，easing就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错！

下载该插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

该插件美化排版后是130行左右，压缩后更小。这个插件弥补了jquery里面的动画效果的不足，是其动画效果更加强悍。

X轴表示时间，Y轴表示的是动画效果的变化。查看这些曲线变化，更利于掌握这个插件的效果。

插件支持站：http://gsgd.co.uk/sandbox/jquery/easing/

效果演示站点：http://james.padolsey.com/demos/jquery/easing/

我们可以通过效果演示站点查看具体运行效果,也可以通过坐标标注的直观效果来了解其运行具体轨迹。例如下图：

 

常用参数：

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

 

方法介绍：

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

关于In、Out、Inout的说明：

• easeIn：加速度缓动；
• easeOut：减速度缓动；
• easeInOut：先加速度至50%，再减速度完成动画。

如何应用：

slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以：

$(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});

具体可参阅jquery1.4+的API。

简单实例：

 

<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
<script type="text/javascript" language="javascript" src="JS/easing.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic');
})
</script>

 

 

开始使用jQuery Easing

方法1、设置jQuery默认动画效果

 

jQuery.easing.def = “method”;//如：easeOutExpo

 

方法2、jQuery默认动画

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果

如以下代码：

 

$(element).slideUp({

    duration: 1000,

    easing: method,

    complete: callback});

 

方法3、使用jQuery自定义动画函数.animate()

jQuery 的.animate()是自定义动画的函数，如上面所说，有四个参数，而其中easing的参数就是我们进行动画效果扩展的方法名称（如easeOutExpo）。网站建设中最简单的使用方法是：

 

$(myElement).animate({

    left: 500,

    top: 500

}, 'easeOutExpo');

James Padolsey对jQuery1.3.2的animate函数进行了修改扩展：


jQuery.fn.animate = (function(_anim){

var jQEasing = jQuery.easing;

return function(prop, duration, easing, callback) {

var props = {}, optall, i, hasEaser = false;

for ( i in prop ) {

if ( jQuery.isArray(prop[i]) ) {

hasEaser = true;

props[i] = prop[i][1];

prop[i] = prop[i][0];

}

}

opt = jQuery.speed(duration, easing, callback);

if (hasEaser) {

opt.step = (function(_step){

return function(now, fx) {

var end = fx.end, easeFn;

if ( easeFn = props[fx.prop] ) {

fx.now = jQEasing[easeFn]( now/end, now, 0, end, end );

}

_step && _step.call( fx.elem, fx.now, fx );

};

})(opt.step);

}

optopt.complete = opt.old || callback || jQuery.isFunction(easing) && easing;

return _anim.call( this, prop, opt );

};

})(jQuery.fn.animate);

 

在jQuery1.4中这种方式已经被引入，所以jQuery1.4中不需要添加jQuery的animate()扩展，我们就可以使用下面的更加方便代码啦：

 

$(myElement).animate({

    left: 500,

    top: [500, 'easeOutBounce']

}, 1000,'swing');

 

 

jQuery1.4 的animate()+Easing

 

 

jQuery(myElement).animate({

left: [500, 'swing'],

top: [200, 'easeOutBounce']

});

或者：

jQuery(myElement).animate({

left: 500,

top: 200

}, {

specialEasing: {

left: 'swing',

top: 'easeOutBounce'

}

});