jQuery初体验：[2]jQuery内置特效函数

早些时候简单介绍了jQuery使用的基础语法。相信大家会很容易上手通过对jQuery对HTML进行操作。现在就来学一点稍微更“复杂”（其实很简单）的特效。请注意：下面的示例都事先在头部当中引入了jQuery文件了。否则其他的Jquery操作将不会执行。

1、hide()/show()

1、其实说起来，hide()/show()是最基础孀晏弁钾也是用的最多的一种效果，它用来控制元素的隐藏与显示。下面是示例，还木有对其进行hide()/show()操作。附上源码：<style>.demo { margin:100px auto; width:600px; height:320px; background:#ededed; border:1px dotted #ff0000}.fl { width:280px; height:300px; float:left; margin-left:10px; margin-top:10px; background:#00cb99;}.fr { width:280px; height:300px; float:right; margin-right:10px; margin-top:10px; background:#0093b4;}</style><div class="demo"> <div class="fl">绿色 </div> <div class="fr">蓝色 </div></div>

2、接下来我们对齐进行jQuery的hide/show操作，我给绿色的绑定点击事件，用以控制蓝色div的显示与隐藏。<script> $(function(){ $(".fl").click(function(){ var _fr = $(".fr"); if(_fr.is(":visible")){ $(".fr").hide() }else{ $(".fr").show() } }) })</script>注意上面的hide和show函数是不带参数的。可以看到蓝色的框被隐藏了，而且隐藏的比较干脆。

3、我们聪艄料姹再来看看传入参数的情况：<script>$(function(){ $(".fl").click(function(){ var _fr = $烫喇霰嘴(".fr"); if(_fr.is(":visible")){ $(".fr").hide(1000) }else{ $(".fr").show(1000) } })})</script>可以看到蓝色的div会向右上角慢慢缩小，然后不见。这就是hide和show的渐变效果，只不过这个渐变效果依赖于其扩后内传递的参数，参数的具体含义：时间，以毫秒为单位。上面我传入的1000，表示执行动画的过程为1s。

fadeIn()/fadeOut()/fadeToggle()

1、fade含义为褪去、暗淡，上面的这几个函数的效果用以实现元素的淡入、淡出、淡入淡出来回切换效果。<script> $(function(){ $(".fl").click(function(){ $(".fr").fadeIn(1000); }) })</script>下面图片上有字的使用了fadeIn效果的元素，fadeIn的效果实施元素从无到有的一个透明度渐变效果，比较浅显的视觉效果就是从透明到不透明。可以对比下两张图片。

2、说明：fadeOut（）的效果和fadeIn（）的效果相反，是从不透明到不透明的渐变隐藏。fadeToggle（）则是两者的结合，如果元素显示，应用之后就会隐藏，反之就会显示。一般配以元素的click事件使用。这里就不在一一演示，大家可以自行操练。

slideDown()/slideUp()/slideToggle()

1、其实这几个函数的效果使用和fade的一样，区别在于他是滑动的显示出来，三个函数的效果分别是滑入、画出、切换显示。<script> $(function(){ $(".fl").click(function(){ $(".fr").slideDown(1000); }) })</script>可以看到slide其实是改变元素的高度值，当高度变为0，元素就为display:none；

2、说明：slideUp（）的效果和slideDown（）的效果相反。slideToggle（）则是两者的结合，如果元素显示，应用之后就会隐藏，繁殖就会显示。一般配以元素的click事件使用。这里就不在一一演示，大家可以自行操练。