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

Posted 小火柴的蓝色理想

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深入学习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以上是关于深入学习jQuery的三种常见动画效果的主要内容，如果未能解决你的问题，请参考以下文章
 

 深入学习jQuery动画控制


 前端动画效果实现的三种方式


 Jquery基础（动画效果的轮播图特效）


 JavaScript——WEBAPIS_深入动画函数的封装，常见网页特效


 jQuery 将 div 切片成动画片段


 jquery中的三组基础动画以及自定义动画