JQuery效果

2016-09-16 16:03
分类:编程  AJAX  

  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事件使用。

好文要顶 收藏该文 我要举报
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力!
上一篇:jQuery属性遍历、HTML操作
下一篇:jQuery效果函数

一起悦读网    Copyright © 2016    浙ICP备11048508号