前面的話

　　動(dòng)畫效果是jQuery吸引人的地方。通過jQuery的動(dòng)畫方法，能夠輕松地為網(wǎng)頁添加視覺效果，給用戶一種全新的體驗(yàn)。jQuery動(dòng)畫是一個(gè)大的系列，本文將詳細(xì)介紹jQuery的三種常見動(dòng)畫效果——顯隱效果、高度變化及淡入淡出

?

顯隱

　　在CSS中，總結(jié)過實(shí)現(xiàn)元素顯隱的9種思路。而jQuery中的show()和hide()方法是通過改變display屬性來實(shí)現(xiàn)元素顯隱效果，它們是jQuery中最基本的動(dòng)畫方法

【hide()】

　　hide()方法是隱藏元素的最簡單方法。如果沒有參數(shù)，匹配的元素將被立即隱藏，沒有動(dòng)畫。這大致相當(dāng)于調(diào)用.css('display', 'none')

　　display屬性值保存在jQuery的數(shù)據(jù)緩存中，所以display可以方便以后可以恢復(fù)到其初始值。如果一個(gè)元素的display屬性值為inline，那么隱藏再顯示時(shí)，這個(gè)元素將再次顯示inline

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="box">按鈕</button> <script> $('#box').click(function(event){$(this).hide(); }); </script>

hide([duration])

　　當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)，hide()就變成了一個(gè)動(dòng)畫方法。hide()方法將為匹配元素的寬度、高度及不透明度同時(shí)執(zhí)行動(dòng)畫。一旦透明度達(dá)到0，display樣式屬性將被設(shè)置為none，這個(gè)元素將不再在頁面中影響布局

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){var value = $(this).html();$('#box').hide(isNaN(Number(value)) ? value:Number(value)) }) </script>

hide([duration][,easing])

　　hide()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，其他可以使用相關(guān)的插件，其中默認(rèn)值為swing

　　linear表示勻速直線運(yùn)動(dòng)，而swing則表示變速運(yùn)動(dòng)，如下圖所示

linear

swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){$('#box').hide(2000,$(this).html()) }) </script>

hide([duration][,easing][,callback])

　　hide()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，該參數(shù)是回調(diào)函數(shù)，表示動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="box">按鈕</button> <script> $('#box').click(function(event){$(this).hide(1000,function(){alert('動(dòng)畫完成');
　　　 $(this).show();}); }); </script>

【show()】

　　show()方法用于顯示元素，與hide()方法用途正好相反，但用法相似

　　[注意]如果選擇的元素是可見的，這個(gè)方法將不會(huì)改變?nèi)魏螙|西

　　如果沒有參數(shù)，匹配的元素將被立即顯示，沒有動(dòng)畫

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="test" style="height: 30px;width: 100px;background:lightblue;display:none;"></div> <script> $('#btn').click(function(event){$('#test').show(); }); </script>

show([duration])

　　與hide()方法類似，當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)，show()就變成了一個(gè)動(dòng)畫方法。show()方法將為匹配元素的寬度、高度及不透明度同時(shí)執(zhí)行動(dòng)畫

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){$('#box').show($(this).html()) }) </script>

show([duration][,easing])

　　show()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){var value = $(this).html();$('#box').show(isNaN(Number(value)) ? value:Number(value)) }) </script>

show([duration][,easing][,callback])

　　show()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，該參數(shù)是回調(diào)函數(shù)，表示動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').show(1000,function(){alert('動(dòng)畫完成')}); }); </script>

【toggle()】

　　show()與hide()是一對(duì)互斥的方法。需要對(duì)元素進(jìn)行顯示隱藏的互斥切換，通常情況是需要先判斷元素的display狀態(tài)，然后調(diào)用其對(duì)應(yīng)的處理方法。比如顯示的元素，那么就要調(diào)用hide，反之亦然。 對(duì)于這樣的操作行為，jQuery提供了一個(gè)便捷方法toggle()用于切換顯示或隱藏匹配元素

　　如果沒有參數(shù)，toggle()方法是最簡單的方法來切換一個(gè)元素可見性

　　通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動(dòng)畫。如果元素是最初顯示，它會(huì)被隱藏，如果隱藏的，它會(huì)顯示出來。display屬性將被儲(chǔ)存并且需要的時(shí)候可以恢復(fù)。如果一個(gè)元素的display值為inline，然后是隱藏和顯示，這個(gè)元素將再次顯示inline

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').toggle(); }); </script>

toggle([duration])

　　當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)，toggle()成為一個(gè)動(dòng)畫方法。toggle()方法將為匹配元素的寬度、高度及不透明度，同時(shí)進(jìn)行動(dòng)畫。當(dāng)一個(gè)隱藏動(dòng)畫后，高度值達(dá)到0的時(shí)候，display樣式屬性被設(shè)置為none，以確保該元素不再影響頁面布局

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){var value = $(this).html();$('#box').toggle(isNaN(Number(value)) ? value:Number(value)) }) </script>

toggle([duration][,easing])

　　toggle()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){$('#box').toggle(2000,$(this).html()) }) </script>

toggle([duration][,easing][,callback])

　　toggle()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，表示回調(diào)函數(shù)，即動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').toggle(1000,function(){alert('動(dòng)畫完成')}); }); </script>

高度變化

　　使用show()/hide()實(shí)現(xiàn)動(dòng)畫效果時(shí)，寬度、高度及透明度會(huì)同時(shí)變化。若只想讓高度發(fā)生變化，則需要使用slideUp()方法和slideDown()方法

【slideUp()】

　　slideUp()方法將元素由下到上縮短隱藏

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').slideUp(); }); </script>

slideUp([duration])

　　slideUp()方法可以接受一個(gè)持續(xù)時(shí)間參數(shù)

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){var value = $(this).html();$('#box').slideUp(isNaN(Number(value)) ? value:Number(value)) }) </script>

slideUp([duration][,easing])

　　slideUp()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing，其他可以使用相關(guān)的插件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){$('#box').slideUp(2000,$(this).html()) }) </script>

slideUp([duration][,easing][,callback])

　　slideUp()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，該參數(shù)是回調(diào)函數(shù)，表示動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="box">按鈕</button> <script> $('#box').click(function(event){$(this).slideUp(1000,function(){alert('動(dòng)畫完成')$(this).show();}); }); </script>

【slideDown()】

　　與slideUp()方法相反，slideDown()方法使元素由上到下延伸顯示

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').slideDown(); }); </script>

slideDown([duration])

　　slideDown()方法可以接受一個(gè)持續(xù)時(shí)間參數(shù)

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){$('#box').slideDown($(this).html()) }) </script>

slideDown([duration][,easing])

　　slideDown()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing，其他可以使用相關(guān)的插件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){var value = $(this).html();$('#box').slideDown(isNaN(Number(value)) ? value:Number(value)) }) </script>

slideDown([duration][,easing][,callback])

　　slideDown()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，表示回調(diào)函數(shù)，即動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').slideDown(1000,function(){alert('動(dòng)畫完成')$('#box').hide();}); }); </script>

【slideToggle()】

　　slideDown與slideUp是一對(duì)相反的方法。需要對(duì)元素進(jìn)行上下拉卷效果的切換，jQuery提供了一個(gè)便捷方法slideToggle()用滑動(dòng)動(dòng)畫顯示或隱藏一個(gè)匹配元素

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').slideToggle(); }); </script>

slideToggle([duration])

　　當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)，slideToggle()成為一個(gè)動(dòng)畫方法

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){var value = $(this).html();$('#box').slideToggle(isNaN(Number(value)) ? value:Number(value)) }) </script>

slideToggle([duration][,easing])

　　slideToggle()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){$('#box').slideToggle(2000,$(this).html()) }) </script>

slideToggle([duration][,easing][,callback])

slideToggle()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，表示回調(diào)函數(shù)，即動(dòng)畫完成時(shí)執(zhí)行的函數(shù) <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').slideToggle(1000,function(){alert('動(dòng)畫完成')}); }); </script>

淡入淡出

　　讓元素在頁面不可見，常用的辦法就是通過設(shè)置樣式的display:none。除此之外還可以一些類似的辦法可以達(dá)到這個(gè)目的設(shè)置元素透明度為0，可以讓元素不可見，透明度的參數(shù)是0~1之間的值，通過改變這個(gè)值可以讓元素有一個(gè)透明度的效果。常見的淡入淡出動(dòng)畫fadeIn()和fadeOut()方法正是這樣的原理

【fadeIn()】

　　fadeIn()方法通過淡入的方式顯示匹配元素

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeIn(); }); </script>

fadeIn([duration])

　　fadeIn()方法可以接受一個(gè)持續(xù)時(shí)間參數(shù)

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){var value = $(this).html();$('#box').fadeIn(isNaN(Number(value)) ? value:Number(value)) }) </script>

fadeIn([duration][,easing])

　　fadeIn()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing，其他可以使用相關(guān)的插件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#box').hide(); $('#reset').click(function(){$('#box').hide(); }) $('#con li').click(function(){$('#box').fadeIn(2000,$(this).html()) }) </script>

fadeIn([duration][,easing][,callback])

　　fadeIn()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，該參數(shù)是回調(diào)函數(shù)，表示動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeIn(1000,function(){alert('動(dòng)畫完成')$('#box').hide();}); }); </script>

【fadeOut()】

　　fadeOut()方法與fadeIn()方法正好相反，可以通過淡出的方式隱藏匹配元素

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeOut(); }); </script>

fadeOut([duration])

　　fadeOut()方法可以接受一個(gè)持續(xù)時(shí)間參數(shù)，持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){var value = $(this).html();$('#box').fadeOut(isNaN(Number(value)) ? value:Number(value)) }) </script>

fadeOut([duration][,easing])

　　fadeOut()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing，其他可以使用相關(guān)的插件

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').show(); }) $('#con li').click(function(){$('#box').fadeOut(2000,$(this).html()) }) </script>

fadeOut([duration][,easing][,callback])

　　fadeOut()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，該參數(shù)是回調(diào)函數(shù)，表示動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="box">按鈕</button> <script> $('#box').click(function(event){$(this).fadeOut(1000,function(){alert('動(dòng)畫完成')$(this).show();}); }); </script>

【fadeToggle()】

　　fadeToggle()方法通過匹配的元素的不透明度動(dòng)畫，來顯示或隱藏它們

　　[注意]沒有參數(shù)時(shí)，持續(xù)時(shí)間默認(rèn)為400毫秒

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeToggle(); }); </script>

fadeToggle([duration])

　　當(dāng)提供一個(gè)持續(xù)時(shí)間參數(shù)，fadeToggle()成為一個(gè)動(dòng)畫方法

　　持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){var value = $(this).html();$('#box').fadeToggle(isNaN(Number(value)) ? value:Number(value)) }) </script>

fadeToggle([duration][,easing])

　　fadeToggle()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#con li').click(function(){$('#box').fadeToggle(2000,$(this).html()) }) </script>

fadeToggle([duration][,easing][,callback])

　　fadeToggle()方法可以接受第三個(gè)參數(shù)，該參數(shù)也是可選參數(shù)，表示回調(diào)函數(shù)，即動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="display:none;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeToggle(1000,function(){alert('動(dòng)畫完成')}); }); </script>

【fadeTo()】

　　淡入淡出fadeIn與fadeOut都是修改元素樣式的opacity屬性，但是他們都有個(gè)共同的特點(diǎn)，變化的區(qū)間要么是0，要么是1。如果要讓元素保持動(dòng)畫效果，執(zhí)行opacity = 0.5的效果時(shí)，要如何處理？jQuery提供了fadeTo()方法，可以讓改變透明度一步到位

fadeTo(duration,opacity)

　　fadeTo()方法有兩個(gè)必需的參數(shù)duration和opacity

　　duration表示持續(xù)時(shí)間，持續(xù)時(shí)間是以毫秒為單位的，數(shù)值越大，動(dòng)畫越慢。默認(rèn)值為'normal'，代碼400毫秒的延時(shí)；'fast'和'slow'分別代表200和600毫秒的延時(shí)

　　opacity為0和1之間的數(shù)字表示元素的不透明度

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>fast</li><li>normal</li><li>slow</li><li>100</li><li>1000</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').css('opacity','1'); }) $('#con li').click(function(){var value = $(this).html();$('#box').fadeTo(isNaN(Number(value)) ? value:Number(value),0.5) }) </script>

　　可以為元素設(shè)置隨機(jī)的不透明度

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeTo('fast',Math.random()); }); </script>

fadeTo(duration,opacity[,easing])

　　fadeTo()方法可以接受一個(gè)可選參數(shù)easing，表示過渡使用哪種緩動(dòng)函數(shù)。jQuery自身提供"linear"和"swing"，默認(rèn)值為swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <style> li{text-decoration: underline; margin-top: 2px;} </style> <ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;"><li>swing</li><li>linear</li> </ul> <button id="reset">恢復(fù)</button> <div id="box" style="display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#reset').click(function(){$('#box').css('opacity','1'); }) $('#con li').click(function(){$('#box').fadeTo('1000','0.1',$(this).html()) }) </script>

fadeTo(duration,opacity[,callback])

　　fadeTo()方法還可以接受一個(gè)可選參數(shù)，該參數(shù)表示回調(diào)函數(shù)，即動(dòng)畫完成時(shí)執(zhí)行的函數(shù)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <button id="btn">按鈕</button> <div id="box" style="height: 100px;width: 300px;background-color: lightblue"></div> <script> $('#btn').click(function(event){$('#box').fadeTo(1000,'0.1',function(){alert('動(dòng)畫完成');$('#box').css('opacity','1');}); }); </script>

轉(zhuǎn)載于:https://www.cnblogs.com/xiaohuochai/p/5932616.html

總結(jié)

以上是生活随笔為你收集整理的深入学习jQuery的三种常见动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。