當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

發布時間：2025/4/16 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

jQuery? Easing

是一款比較老的jQuery插件，在很多網站都有應用，尤其是在一些頁面滾動、幻燈片切換等場景應用比較多。它非常小巧，且有多種動畫方案供選擇，使用簡單，而且免費。

引入Easing js文件

該插件基于jQuery，所以需要同時引入jQuery庫文件和Easing js文件。

jQuery Easing是在jQuery原有的動畫效果上進行了擴展，所以使用時可以根據jQuery原有的動畫函數進行擴展。

設置jQuery默認動畫效果

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

jQuery默認動畫

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果，使用代碼如下：

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

參數duration：定義動畫運動時間，毫秒，其實就是速度，時間越短，運動速度越快。

參數easing：指定動畫效果，Easing js提供多種動畫效果，有勻速運動、變加速運動、緩沖波動效果，它們是：
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.

使用jQuery自定義動畫函數animate()

jQuery Easing結合jQuery的自定義動畫函數animate()可以制作各種你想要的動畫效果，使用代碼如下：

$(element).animate({?
????height:500,?
????width:600?
????},{?
????easing:?'easeInOutQuad',?
????duration:?500,?
????complete:?callback?
});
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/效果實例

else?var?s?=?p/(2*Math.PI)?*?Math.asin?(c/a);?

return?-(a*Math.pow(2,10*(t-=1))?*?Math.sin(?(t*d-s)*(2*Math.PI)/p?))?+?b;?

},?

easeOutElastic:?function?(x,?t,?b,?c,?d)?{?

var?s=1.70158;var?p=0;var?a=c;?

if?(t==0)?return?b;?

if?((t/=d)==1)?return?b+c;?

if?(!p)?p=d*.3;?

if?(a?<?Math.abs(c))?{?a=c;?var?s=p/4;?}?

else?var?s?=?p/(2*Math.PI)?*?Math.asin?(c/a);?

return?a*Math.pow(2,-10*t)?*?Math.sin(?(t*d-s)*(2*Math.PI)/p?)?+?c?+?b;?

},?

easeInOutElastic:?function?(x,?t,?b,?c,?d)?{?

var?s=1.70158;var?p=0;var?a=c;?

if?(t==0)?return?b;?

if?((t/=d/2)==2)?return?b+c;?

if?(!p)?p=d*(.3*1.5);?

if?(a?<?Math.abs(c))?{?a=c;?var?s=p/4;?}?

else?var?s?=?p/(2*Math.PI)?*?Math.asin?(c/a);?

if?(t?<?1)?return?-.5*(a*Math.pow(2,10*(t-=1))?*?Math.sin(?(t*d-s)*(2*Math.PI)/p?))?+?b;?

return?a*Math.pow(2,-10*(t-=1))?*?Math.sin(?(t*d-s)*(2*Math.PI)/p?)*.5?+?c?+?b;?

},?

easeInBack:?function?(x,?t,?b,?c,?d,?s)?{?

if?(s?==?undefined)?s?=?1.70158;?

return?c*(t/=d)*t*((s+1)*t?-?s)?+?b;?

},?

easeOutBack:?function?(x,?t,?b,?c,?d,?s)?{?

if?(s?==?undefined)?s?=?1.70158;?

return?c*((t=t/d-1)*t*((s+1)*t?+?s)?+?1)?+?b;?

},?

easeInOutBack:?function?(x,?t,?b,?c,?d,?s)?{?

if?(s?==?undefined)?s?=?1.70158;?

if?((t/=d/2)?<?1)?return?c/2*(t*t*(((s*=(1.525))+1)*t?-?s))?+?b;?

return?c/2*((t-=2)*t*(((s*=(1.525))+1)*t?+?s)?+?2)?+?b;?

},?

easeInBounce:?function?(x,?t,?b,?c,?d)?{?

return?c?-?jQuery.easing.easeOutBounce?(x,?d-t,?0,?c,?d)?+?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;?

},?

easeInOutBounce:?function?(x,?t,?b,?c,?d)?{?

if?(t?<?d/2)?return?jQuery.easing.easeInBounce?(x,?t*2,?0,?c,?d)?*?.5?+?b;?

return?jQuery.easing.easeOutBounce?(x,?t*2-d,?0,?c,?d)?*?.5?+?c*.5?+?b;?

});?

至于該如何使用上面的緩動函數呢？將緩動函數保存為

文件，在

html

中

jquery

文件之后

調用。下面是使用示例，用

animate

動畫：

<!DOCTYPE?

HTML?

PUBLIC?

"-//W3C//DTD?

HTML?

4.01?

Transitional//EN"?

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">?

?

<HTML?

xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jQuery+easing

緩

動

的

動

畫

</TITLE>?

<META?http-equiv=Content-Type?content="text/html;?charset=utf-8">?

<STYLE?type=text/css>?{?

PADDING-RIGHT:?0px;?PADDING-LEFT:?0px;?PADDING-BOTTOM:?0px;?MARGIN:?0px;?

PADDING-TOP:?0px?

BODY?{?

FONT:?12px/1.8?Arial;?COLOR:?#666;?TEXT-ALIGN:?center?

UL?{?

LIST-STYLE-TYPE:?none?

H1?{?

MARGIN:?15px?0px;?FONT:?bold?24px/1.5?"Microsoft?Yahei";?TEXT-ALIGN:?center?

.wrapper?{?

BORDER-RIGHT:?

#e6e6e6?

1px?

solid;?

PADDING-RIGHT:?

20px;?

BORDER-TOP:?

#e6e6e6?

1px?

solid;?

PADDING-LEFT:?

20px;?

PADDING-BOTTOM:?

20px;?

MARGIN:?

0px?

auto;?

BORDER-LEFT:?

#e6e6e6?

1px?

solid;?

WIDTH:?

910px;?

PADDING-TOP:?

20px;?

BORDER-BOTTOM:?#e6e6e6?1px?solid;?BACKGROUND-COLOR:?#f6f6f6?

.animation?{?

BORDER-RIGHT:?

#ddd?

1px?

solid;?

BORDER-TOP:?

#ddd?

1px?

solid;?

BACKGROUND:?

#efefef;?

BORDER-LEFT:?

#ddd?

1px?

solid;?

BORDER-BOTTOM:?

#ddd?

1px?

solid;?

POSITION:?

relative;?HEIGHT:?50px?

.block?{?

LEFT:?

0px;?

WIDTH:?

50px;?

POSITION:?

absolute;?

TOP:?

0px;?

HEIGHT:?

50px;?

BACKGROUND-COLOR:?#000?

.console?{?

PADDING-RIGHT:?

15px;?

PADDING-LEFT:?

15px;?

PADDING-BOTTOM:?

15px;?

PADDING-TOP:?15px?

.text?{?

TEXT-ALIGN:?left?

P?{?

PADDING-RIGHT:?

0px;?

PADDING-LEFT:?

0px;?

PADDING-BOTTOM:?

0px;?

PADDING-TOP:?10px?

</STYLE>?

<META?content="MSHTML?6.00.2900.6148"?name=GENERATOR></HEAD>?

<BODY>?

<H1>jQuery+easing

緩動的動畫

</H1>?

<DIV?class=wrapper>?

<DIV?class=animation>?

<DIV?class=block?id=block></DIV></DIV>?

<DIV?class=console><SELECT?id=easingType?name=swing>?<OPTION?value=""?

selected>def?-?

默認方式設置

</OPTION>?<OPTION?value=easeInQuad>in?-?Quadratic?-?

二次方緩動

</OPTION>?

<OPTION?

value=easeOutQuad>out?

Quadratic?

二次方緩動

</OPTION>?

<OPTION?value=easeInOutQuad>inOut?-?Quadratic?-?

二次方緩動

</OPTION>?<OPTION?

value=easeInCubic>in?-?Cubic?-?

三次方緩動

</OPTION>?<OPTION?value=easeOutCubic>out?

Cubic

：三次方緩動

</OPTION>?<OPTION?value=easeInOutCubic>inOut?-?Cubic

：三次方緩

動

</OPTION>?

<OPTION?value=easeInQuart>in?-?Quartic?-?

四次方緩動

</OPTION>?<OPTION?

value=easeOutQuart>out?-?Quartic?-?

四次方緩動

</OPTION>?<OPTION?

value=easeInOutQuart>inOut?-?Quartic?-?

四次方緩動

</OPTION>?<OPTION?

value=easeInQuint>in?

Quintic?

五

次

方

緩

動

</OPTION>?

<OPTION?

value=easeOutQuint>out?

-?Quintic?-?

五次方緩動

</OPTION>?<OPTION?value=easeInOutQuint>inOut?-?Quintic?-?

五次方緩

動

</OPTION>?

<OPTION?

value=easeInSine>in?

Sinusoidal?

正弦曲

線緩動

</OPTION>?

<OPTION?value=easeOutSine>out?-?Sinusoidal?-?

正弦曲線緩動

</OPTION>?<OPTION?

value=easeInOutSine>inOut?-?Sinusoidal?-?

正弦曲線緩動

</OPTION>?<OPTION?

value=easeInExpo>in?-?Exponential?-?

指數曲線緩動

</OPTION>?<OPTION?

value=easeOutExpo>out?-?Exponential?-?

指數曲線緩動

</OPTION>?<OPTION?

value=easeInOutExpo>inOut?-?Exponential?-?

指數曲線緩動

</OPTION>?<OPTION?

value=easeInCirc>in?

Circular?

圓

形

曲

線

緩

動

</OPTION>?

<OPTION?

value=easeOutCirc>out?

-?Circular?-?

圓形曲線緩動

</OPTION>?<OPTION?value=easeInOutCirc>inOut?-?Circular?-?

圓形曲線緩動

</OPTION>?<OPTION?value=easeInElastic>in?-?Elastic?-?

指數衰減的正弦曲線緩動

</OPTION>?<OPTION?value=easeOutElastic>out?-?Elastic?-?

指數衰減的正弦曲線緩動

</OPTION>?<OPTION?value=easeInOutElastic>inOut?-?Elastic?-?

指數衰減的正弦曲線緩動

</OPTION>?<OPTION?value=easeInBack>in?-?Back?-?

超過范圍的

三次方緩動

</OPTION>?

<OPTION?value=easeOutBack>out?-?Back?-?

超過范圍的三次方緩動

</OPTION>?<OPTION?

value=easeInOutBack>inOut?-?Back?-?

超過范圍的三次方緩動

</OPTION>?<OPTION?

value=easeInBounce>in?-?Bounce?-?

指數衰減的反彈緩動

</OPTION>?<OPTION?

value=easeOutBounce>out?-?Bounce?-?

指數衰減的反彈緩動

</OPTION>?<OPTION?

value=easeInOutBounce>inOut?

Bounce?

指數衰減的反彈緩動

</OPTION></SELECT>?

<INPUT?

id=button_start?

type=button?

value=

向右運動

<INPUT?

id=button_stop?

type=button?

value=

向左運動

>?</DIV>?

<DIV?class=text>?

方法介紹：

</STRONG></P>?

<UL>?

<LI>def

：默認方式設置

<LI>swing

：默認方式加載

<LI>Quad

：二次方緩動

(t)?

<LI>Cubic

：三次方緩動

<LI>Quart

：四次方緩動

<LI>Quint

：五次方緩動

<LI>Sine

：正弦曲線緩動

<LI>Expo

：指數曲線緩動

<LI>Circ

：圓形曲線的緩動

<LI>Elastic

：指數衰減的正弦曲線緩動

<LI>Back

：超過范圍的三次方緩動

<LI>Bounce

：指數衰減的反彈緩動

</LI></UL>?

關于

、

Out

、

Inout

的說明：

</STRONG></P>?

<UL>?

：加速度緩動；

：減速度緩動；

<LI>ease<STRONG>InOut</STRONG>

：

先

加

速

度

至

50%

，

再

減

速

度

完

成

動

畫

。

</LI></UL>?

<P>

緩動方式的翻譯來自：

<A?

href="http://www.ushai.net/class/13.html">

優曬女裝

</A></P>?

<P>

原創文章，轉載請注明出處：

<A?href="http://www.ushai.net/">

優曬

</A></P></DIV></DIV>?

<div?id="test"></div>?

<SCRIPT?src="jQuery+easing

緩動的動畫

.files/jquery.min.js"?

type=text/javascript></SCRIPT>?

<SCRIPT?src="jQuery+easing

緩動的動畫

.files/jquery.easing.1.3.js"?

type=text/javascript></SCRIPT>?

<SCRIPT?type=text/javascript>?

$(document).ready(function(){?

$('#button_start').click(function(event){?

var?actionType?=?$("#easingType").val();?

$('#block').animate({left:858},1000,actionType,function(){});?

event.preventDefault();?

});?

$('#button_stop').click(function(event){?

var?actionType?=?$("#easingType").val();?

$('#block').animate({left:0},1000,actionType,function(){});?

event.preventDefault();?

});?

</SCRIPT>?

</BODY></HTML>?

總結

以上是生活随笔為你收集整理的jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux系统状态检测及进程控制--2
下一篇：如何在Mac下显示Finder中的所有文