眼前的讲话

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

jQuery 1

swing

jQuery 2

<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>

相关文章

网站地图xml地图