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

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。

1、fade含义为褪去、暗淡，上面的这几个函数的效果用以实现元素的淡入、淡出、淡入淡出来回切换效果。

<script>

$(function(){

$(".fl").click(function(){

$(".fr").fadeIn(1000);

})

})

</script>

下面图片上有字的使用了fadeIn效果的元素，fadeIn的效果实施元素从无到有的一个透明度渐变效果，比较浅显的视觉效果就是从透明到不透明。

可以对比下两张图片。

2、说明：

fadeOut（）的效果和fadeIn（）的效果相反，是从不透明到不透明的渐变隐藏。

fadeToggle（）则是两者的结合，如果元素显示，应用之后就会隐藏，反之就会显示。一般配以元素的click事件使用。

这里就不在一一演示，大家可以自行操练。

1、其实这几个函数的效果使用和fade的一样，区别在于他是滑动的显示出来，三个函数的效果分别是滑入、画出、切换显示。

<script>

$(function(){

$(".fl").click(function(){

$(".fr").slideDown(1000);

})

})

</script>

可以看到slide其实是改变元素的高度值，当高度变为0，元素就为display:none；

2、说明：

slideUp（）的效果和slideDown（）的效果相反。

slideToggle（）则是两者的结合，如果元素显示，应用之后就会隐藏，繁殖就会显示。一般配以元素的click事件使用。

这里就不在一一演示，大家可以自行操练。