JQuery效果

　　JQuery可以创建显示、隐藏、切换、滑动以及自定义动画等效果。

1.hide()/show()

　　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>

　　接下来我们对其进行hide()/show()操作，为绿色div绑定点击事件，用以控制蓝色div的显示和隐藏：

<script>

$(function(){

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

        var _fr = $(".fr");

        if(_fr.is(":visible")){

            $(".fr").hide()

        }else{

           $(".fr").show()

        }

    })

})

</script>

2.fadeIn()/fadeOut()/fadeToggle()

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

　　　

　　<script>

　　　　$(function(){

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

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

　　　　　　})

　　　　})

</script>

　　fadeIn的效果实施元素从无到有的一个透明度渐变效果，比较浅显的视觉效果就是从透明到不透明。　

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

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

3.slideDown()/slideUp()/slideToggle()

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

<script>

　　$(function(){

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

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

　　　　})

　　})

</script>

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

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

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