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

×

目录

[1]显隐效果 [2]高度变化 [3]淡入淡出

前面的话

　　动画效果是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(){
    $(‘#box‘).hide($(this).html())
})
</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>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‘).show(2000,$(this).html())
})
</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(){
    $(‘#box‘).toggle($(this).html())
})
</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(){
    $(‘#box‘).slideUp($(this).html())
})
</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>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‘).slideDown(2000,$(this).html())
})
</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(){
    $(‘#box‘).slideToggle($(this).html())
})
</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(){
    $(‘#box‘).fadeIn($(this).html())
})
</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(){
    $(‘#box‘).fadeOut($(this).html())
})
</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(){
    $(‘#box‘).fadeToggle($(this).html())
})
</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(){
    $(‘#box‘).fadeTo($(this).html(),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>
时间： 2024-10-25 02:52:31

深入学习jQuery的三种常见动画效果的相关文章

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

Jquery基础篇6___动画效果

最近由于太忙,总是没有时间写东西,不是有句古话说时间似海绵中的水,挤挤总会有的,但感觉当了程序员之后,总是在忙着写代码,忙着学新技术,时间本来就不够,想挤挤时间抽空写点东西,总是挤不出来.忙里偷得半日闲,有时间还是写写比较好.有时候感觉自己写的这些东西不是很多人都有吗,而且Jquery官网上写的要比自己好多了,但是写自己的东西总会有自己的理解,有自己的想法在其中,而且印象也比较深刻.学过Jquery的人,肯定会感觉自己当时候照着例子的时候会,真正要写大型的JS代码的时候,却总写不出来,而且过不了

jquery 物品加入购物车动画效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

大三在校生的传智120天的1200小时.net(十) 关于JQuery（最后一点动画效果*）

1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中. 2,math.abs(len)取绝对值 3,按钮高亮显示,一般是配置两个按钮,一个普通的,一个高亮度的(比如普通样式按钮坐标为100,100. 高亮样式按钮坐标为120,120),当鼠标经过,js改变css background-position:100 -100;动态变为120 -120.(至于为什么当你在很多网站要保存一个小图标,却保存成了很大的图片,就是因为网站的图标显示离痛了bac

jQuery事件机制，动画效果，工具和其他操作（三）

jQuery事件机制 1 事件操作 1.1 页面载入事件 $(document).ready(function(){ // 在这里写你的代码... }); 或者 $(function($) { // 你可以在这里继续使用$作为别名... }); 1.2 事件绑定 on(eve,[sel],[data],fn) 1.7+ 在选择元素上绑定一个或多个事件的事件处理函数 bind(type,[data],fn) 3.0- 请使用on() one(type,[data],fn) 为每一个匹配元素的特定事

jquery.animateNumber.js 数字动画效果

应要求  ,改个东西,需要的数字动画效果网上搜了,都没有满足要求效果的现成插件,最后找到<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js</a>. 需要的效果如图:: 要求有分割符及小数位,但是<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js

WPF学习笔记（2）——动画效果按钮变长

说明(2017-6-12 11:26:48): 1. 视频教程里是把一个按钮点击一下,慢慢变长: 注意几个方面: (1)RoutedEvent="Button.Click",这里面要用Button,是属性名,而不是name名button1. (2)这些东西要写在成对的标签里面,比如这个是<Button></button>,如果是单个的那种标签,可以拆分成对,比如下面我自己的<MediaElement/>本身是一个单独标签,可以手动拆分成<Med

jquery实现锚点动画效果

锚点相信大家都使用过吧!点击后僵硬的切换是不是很不爽呢? 下面分享一个小技巧,根据锚点offset值来实现动画切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

jQuery 自带的动画效果

1.方法: show:显示选中元素. hide:隐藏选中元素. toggle:显示或隐藏选中元素. fadeIn:将选中元素的不透明度逐步提升到100%. fadeOut:将选中元素的不透明度逐步降为0%. slideDown:垂直向下滑动显示选中元素. slideUp:垂直向上滑动隐藏当前元素. slideToggle:垂直向上或向下滑动的形式折叠或展开选中元素. 2.语法: $(selector).方法名([speed], [callback]); -- speed:可选,表示速度.默认“n