Jquery基础入门-3-JQuery实现动画与特效

不念不忘少年蓝@ 2021-12-03 15:45 339阅读 0赞

**一、jQuery库提供的动画效果**  
1、show(\[speed,\[easing\],\[fn\]\]) 元素的显示，同时修改多个样式属性即高度、宽度和不透明度。  
2、hide(\[speed,\[easing\],\[fn\]\]) 元素的隐藏，同时修改多个样式属性即高度、宽度和不透明度。  
3、toggle(\[speed\],\[easing\],\[fn\]) 用来替代show()和hide()方法  
4、slideDown(\[speed\],\[easing\],\[fn\]) 元素从上之下显示。只改变高度。  
5、slideUp(\[speed,\[easing\],\[fn\]\]) 元素从下之上显示。只改变高度。  
6、slideToggle(\[speed\],\[easing\],\[fn\]) 用来替代slideDown()和slideUp()

7、fadeIn(\[speed\],\[easing\],\[fn\]) 元素淡入显示，只改变不透明度  
8、fadeOut(\[speed\],\[easing\],\[fn\]) 元素淡出显示，只改变不透明度  
9、fadeTo(\[\[speed\],opacity,\[easing\],\[fn\]\]) 元素淡入指定不透明度的效果，只改变不透明度  
10、fadeToggle(\[speed,\[easing\],\[fn\]\]) 用来代替fadeIn()和fadeOut()

![1603260-20190717200922039-1037712442.png][]

![1603260-20190717201308491-1048374507.png][]

![1603260-20190717201547435-507394915.png][]

![1603260-20190717201837084-1378150174.png][]

**二、自定义动画**  
1、语法:animate(params,speed,callback);

![1603260-20190717202025236-1995645006.png][]

![1603260-20190717202040702-1111228765.png][]

![1603260-20190717202131134-602266493.png][]

![1603260-20190717202200676-1132611251.png][]

![1603260-20190717202433238-1899008730.png][]

![1603260-20190717202739962-1880748042.png][]

![1603260-20190717202829882-1130546044.png][]

![1603260-20190717202901137-208588852.png][]

2、停止动画

◆ 语法:stop(\[clearQueue\],\[goToEnd\])

![1603260-20190717203237350-1744815693.png][]

![1603260-20190717203300383-1948419998.png][]

![1603260-20190717203316184-812812626.png][]

![1603260-20190717203909854-999190957.png][]

![1603260-20190717204131679-2005738634.png][]

伸缩导航条

![1603260-20190717204205501-1476971062.png][]

![1603260-20190717204308827-1973841540.png][]

![1603260-20190717204318518-1634163207.png][]

![1603260-20190717204347372-782849354.png][]

![1603260-20190717204954575-94809908.png][]

3、判断元素书否处于动画状态  
◆if(!$(“element”).is(“:animated”))\{//判断元素是否处于动画状态\}  
4、延时动画  
◆ 语法:delay(duration)

![1603260-20190717205038451-106559928.png][]

转载于:https://www.cnblogs.com/HiJackykun/p/11203591.html

[1603260-20190717200922039-1037712442.png]: /images/20211203/3fed0d6911b0466db368d4db068b35be.png
[1603260-20190717201308491-1048374507.png]: /images/20211203/94df7c01a42d4613ab8bfd5d66620ddf.png
[1603260-20190717201547435-507394915.png]: /images/20211203/bb904cd276b8485993842bfb7b3798a9.png
[1603260-20190717201837084-1378150174.png]: /images/20211203/77530f9538414dfa99167d1d1fea6fc4.png
[1603260-20190717202025236-1995645006.png]: /images/20211203/2e79a5dd74cb472cbd4d663a2ce8abfb.png
[1603260-20190717202040702-1111228765.png]: /images/20211203/ce8f6b1fb7034c6e981654efcded00b8.png
[1603260-20190717202131134-602266493.png]: /images/20211203/3b49b3de5f434793bafef9b2107c25d2.png
[1603260-20190717202200676-1132611251.png]: /images/20211203/5d0899f9dfaa48e7896c63552516a540.png
[1603260-20190717202433238-1899008730.png]: /images/20211203/e533c48117e3434fb634dfb97931acb2.png
[1603260-20190717202739962-1880748042.png]: /images/20211203/f7669c52299d4803b026837f3ae0d25f.png
[1603260-20190717202829882-1130546044.png]: /images/20211203/4ff2b135a79b4ea480364312708eec6c.png
[1603260-20190717202901137-208588852.png]: /images/20211203/027232df59a7411a83e4a09f0af64367.png
[1603260-20190717203237350-1744815693.png]: /images/20211203/abc588963f6a4b40babc251128b0379c.png
[1603260-20190717203300383-1948419998.png]: /images/20211203/e445dd5c5be54ea9b3bbb3aa0072b334.png
[1603260-20190717203316184-812812626.png]: /images/20211203/04cc8336ca6c49ceb0793b7a5e294454.png
[1603260-20190717203909854-999190957.png]: /images/20211203/d6d47ad4d33d4d54b8e8ef0253c7cbf9.png
[1603260-20190717204131679-2005738634.png]: /images/20211203/137375a11c2945199f71e05c040f847c.png
[1603260-20190717204205501-1476971062.png]: /images/20211203/4babd708c56f4dcba6e4b4e4beb74a99.png
[1603260-20190717204308827-1973841540.png]: /images/20211203/34f2afe580f3468f9d8706c42e46e0d8.png
[1603260-20190717204318518-1634163207.png]: /images/20211203/c57d00feed994f2682adffa1c6c9c6f3.png
[1603260-20190717204347372-782849354.png]: /images/20211203/49a41721e93e4158b2808b3d69ed2ee8.png
[1603260-20190717204954575-94809908.png]: /images/20211203/af1e7142a2794707a538bd335c08a109.png
[1603260-20190717205038451-106559928.png]: /images/20211203/62bac2281be2453da6fe333c5a98dad9.png