深入学习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>
深入学习jQuery的三种常见动画效果的更多相关文章
- 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件
一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...
- jquery 最简单的动画效果
<p style="border: 1px solid red"> 我会慢慢变大 </p> <a>dianji</a> <sc ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- Jquery绑定事件及动画效果
Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...
- 关于JQuery（最后一点动画效果*）
1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一 ...
- 强大的JQuery（二）--动画效果
上篇博客我们讲过了jquery的基础知识--强大的JQuery(一)--基础篇,作为web开发人员,网页的动画效果是不可缺少的,本篇博客重点来说说jquery的动画效果的实现. 因为动画的效果不能截图 ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- jQuery入门基础（动画效果）
一.隐藏显示 1.show()--显示隐藏的被选择元素 例:$(selector).show(speed,callback); 2.hide()--隐藏被选元素的内容 例:$(selector).hi ...
- WPF学习笔记（2）——动画效果按钮变长
说明(2017-6-12 11:26:48): 1. 视频教程里是把一个按钮点击一下,慢慢变长: 注意几个方面: (1)RoutedEvent="Button.Click",这里面 ...
随机推荐
- sublime 安装 插件
从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console.将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装.以下提供 ST3 和 ...
- iOS 中自定义 cell，点击cell的时候文字不出现的原因
解决方案: 在setSelected方法中设置要显示label的背景颜色即可
- sql 更新列表中最老的一条数据
今天组长给个任务说要给摄像头触发一个列表.让缓存5条数据,每次摄像头触发更新一条,丢掉最老的一条数据.原来的update是直接更新掉一条,没带缓存的.然后搞了个sql语句,是这样的: UPDATE C ...
- ubuntu 16.04 安装完QQ后，更新或apt-get报错
apt-get install python-pip正在读取软件包列表... 完成正在分析软件包的依赖关系树 正在读取状态信息... 完成 您可能需要运行“apt-get -f install”来纠正 ...
- 不可变数组NSArray
//数组里面不允许存放基本数据类型,只能存放“对象” NSArray *array = [NSArray arrayWithObjects:@"周星星",@"尹天仇&qu ...
- 一键保存Feedly里的文章到有道笔记
写在之前:今天升级了有道笔记3.5,发现有道笔记支持发邮件保存笔记了,所以就分享一下怎么通过IFTTT保存到有道笔记.因为IFTTT是外国货,所以一直没有有道笔记的频道,不过有了发邮件保存笔记的功能, ...
- Windows多线程多任务设计初步（转）
Windows多线程多任务设计初步 ［前言:］当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...
- (转)Vsdocman7.2 注册版
Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...
- HDU2818 并查集
Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- PHP如何使用GeoIP数据库
1.首先下载GeoIP的IP库.参考<利用GeoIP数据库及API进行地理定位查询>.下载后解压,得到一个GeoIP.dat文件 2.新建一个文件geoip.inc.内容为 <?ph ...