前面的话

  动画效果是jQuery吸引人的地点。通过jQuery的动画片方法,可以轻易地为网页增加视觉效果,给用户1种斩新的体验。jQuery动画是二个大的多级,本文将详细介绍jQuery的两种常见动画效果——显隐效果、高度变化及淡入淡出

 

显隐

  在CSS中,总计过完毕要素显隐的玖种思路。而jQuery中的show()和hide()方法是经过更改display属性来兑现要素显隐效果,它们是jQuery中最核心的动画方法

【hide()】

  hide()方法是隐藏成分的最轻松易行方法。假诺未有参数,相称的要素将被当即隐藏,未有动画。那大约也就是调用.css(‘display’,
‘none’)

  display属性值保存在jQuery的数额缓存中,所以display能够便宜现在能够苏醒到其开始值。假若3个元素的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()就产生了3个动画方法。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()方法还可以1个可选参数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()方法将为相称成分的大幅、中度及不反射率,同时拓展动画。当1个隐形动画后,中度值到达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()方法可以承受3个可选参数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()方法能够承受3个持续时间参数

  持续时间是以飞秒为单位的,数值越大,动画越慢。暗许值为’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()用滑动动画展现或隐藏3个相称成分

  [注意]从不参数时,持续时间默以为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~一之间的值,通过改造那一个值能够让要素有多个发光度的功用。常见的淡入淡出动画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()方法还可以1个可选参数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()方法能够承受2个可选参数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])

  当提供1个持续时间参数,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,要么是一。假使要让要素保持动画效果,实施opacity

0.伍的法力时,要怎么着管理?jQuery提供了fadeTo()方法,能够让更换折射率一步到位

fadeTo(duration,opacity)

  fadeTo()方法有七个必备的参数duration和opacity

  duration代表持续时间,持续时间是以微秒为单位的,数值越大,动画越慢。暗中同意值为’normal’,代码400阿秒的延时;’fast’和’slow’分别表示200和600纳秒的延时

  opacity为0和一里面包车型地铁数字代表成分的不反射率

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

jQuery,  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地图