深入学习jQuery的三种常见动画效果

前面的话

　　动画效果是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>

posted @ 2016-10-06 22:16 小火柴的蓝色理想阅读(17528) 评论(0) 编辑收藏举报

刷新页面返回顶部

小火柴的蓝色理想

深入学习jQuery的三种常见动画效果

前面的话

显隐

高度变化

淡入淡出

公告