深入學習jQuery的三種常見動畫效果 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

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

顯隱

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

【hide()】

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

　　display屬性值保存在jQuery的數據緩存中，所以display可以方便以后可以恢復到其初始值。如果一個元素的display屬性值為inline，那么隱藏再顯示時，這個元素將再次顯示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])

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

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，其他可以使用相關的插件，其中默認值為swing

　　linear表示勻速直線運動，而swing則表示變速運動，如下圖所示

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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<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('動畫完成');
　　　 $(this).show();
  });
});
</script>

【show()】

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

　　[注意]如果選擇的元素是可見的，這個方法將不會改變任何東西

　　如果沒有參數，匹配的元素將被立即顯示，沒有動畫

<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()方法類似，當提供一個持續時間參數，show()就變成了一個動畫方法。show()方法將為匹配元素的寬度、高度及不透明度同時執行動畫

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<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('動畫完成')
  });
});
</script>

【toggle()】

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

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

　　通過改變CSS的display屬性，匹配的元素將被立即顯示或隱藏，沒有動畫。如果元素是最初顯示，它會被隱藏，如果隱藏的，它會顯示出來。display屬性將被儲存并且需要的時候可以恢復。如果一個元素的display值為inline，然后是隱藏和顯示，這個元素將再次顯示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])

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

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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()方法可以接受第三個參數，該參數也是可選參數，表示回調函數，即動畫完成時執行的函數

<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('動畫完成')
  });
});
</script>

高度變化

　　使用show()/hide()實現動畫效果時，寬度、高度及透明度會同時變化。若只想讓高度發生變化，則需要使用slideUp()方法和slideDown()方法

【slideUp()】

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

　　[注意]沒有參數時，持續時間默認為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()方法可以接受一個持續時間參數

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<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('動畫完成')
      $(this).show();
  });
});
</script>

【slideDown()】

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

　　[注意]沒有參數時，持續時間默認為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()方法可以接受一個持續時間參數

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，表示回調函數，即動畫完成時執行的函數

<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('動畫完成')
      $('#box').hide();
  });
});
</script>

【slideToggle()】

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

　　[注意]沒有參數時，持續時間默認為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])

　　當提供一個持續時間參數，slideToggle()成為一個動畫方法

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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()方法可以接受第三個參數，該參數也是可選參數，表示回調函數，即動畫完成時執行的函數
<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('動畫完成')
  });
});
</script>

淡入淡出

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

【fadeIn()】

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

　　[注意]沒有參數時，持續時間默認為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()方法可以接受一個持續時間參數

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<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('動畫完成')
      $('#box').hide();
  });
});
</script>

【fadeOut()】

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

　　[注意]沒有參數時，持續時間默認為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()方法可以接受一個持續時間參數，持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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">恢復</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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法可以接受第三個參數，該參數也是可選參數，該參數是回調函數，表示動畫完成時執行的函數

<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('動畫完成')
      $(this).show();
  });
});
</script>

【fadeToggle()】

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

　　[注意]沒有參數時，持續時間默認為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])

　　當提供一個持續時間參數，fadeToggle()成為一個動畫方法

　　持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

<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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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()方法可以接受第三個參數，該參數也是可選參數，表示回調函數，即動畫完成時執行的函數

<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('動畫完成')
  });
});
</script>

【fadeTo()】

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

fadeTo(duration,opacity)

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

　　duration表示持續時間，持續時間是以毫秒為單位的，數值越大，動畫越慢。默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

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

<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">恢復</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>

　　可以為元素設置隨機的不透明度

<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()方法可以接受一個可選參數easing，表示過渡使用哪種緩動函數。jQuery自身提供"linear"和"swing"，默認值為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">恢復</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()方法還可以接受一個可選參數，該參數表示回調函數，即動畫完成時執行的函數

<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('動畫完成');
      $('#box').css('opacity','1');
  });
});
</script>