cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery效果实现

jQuery效果实现

一个新手
一个新手asal
2017-10-10 10:13:551361semak imbas


隐藏/显示

jQuery中的hide()与show()函数是用来控制元素的隐藏与显示，调用格式如下：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

将上面的两个方法综合一下，就是toggle函数
其中的两个参数，speed参数是控制元素隐藏/显示的速度（取值可以是slow,fast，或者自己定义的时间，单位是毫秒要注意的是slow与fast要用引号包起来），callback可以传入函数，在hide或show动作完成之后触发，例如：

<!DOCTYPE html><html><head>
  <title>jQuery-效果</title>
  <script type="text/javascript"  src="jquery-3.2.1.js"></script>
  <style type="text/css">
    *{      
    margin: 0px;      
    padding: 0px;      
    font-size: 20px;      
    font-weight: bold;    
    }
  </style></head><body>
  <p id="p1">Hello jQuery!</p>
  <button id="btn_hide">HIDE</button>
  <button id="btn_show">SHOW</button>
  <button id="btn_toggle">TOGGLE</button><!-- 使用jQuery进行元素的隐藏与显示的基本格式是： 
  $(selector).event(speed,callback) -->

  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn_hide").click(function(){
        $("#p1").hide(2000,function(){
          alert("HIDE!");         //动作完成之后弹出消息框
        });
      });
      $("#btn_show").click(function(){
        $("#p1").show();
      });
      $("#btn_toggle").click(function(){
        $("#p1").toggle();
      });
    });  </script></body></html>

淡入淡出效果

淡入淡出效果与隐藏与显示函数基本一致，但是除了这个之外的还有一个函数，fadeTo(),这个函数是用来改变元素透明的，使用格式如下：

$(selector).fadeTo(speed,opacity,callback);

其中前两个参数必须传入，opacity是0~1之间的小数，例子如下：

<!DOCTYPE html><html><head>
  <title>jQuery-效果</title>
  <script type="text/javascript"  src="jquery-3.2.1.js"></script>
  <style type="text/css">
    *{      
    margin: 5px;     
    padding: 0px;      
    font-size: 20px;      
    font-weight: bold;    
    }
  </style></head><body>
  <p id="p2">Hello jQuery!</p>
  <button id="btn_fadein">FADEIN</button>
  <button id="btn_fadeout">FADEOUT</button>
  <button id="btn_fadetoggle">FADETOGGLE</button>
  <button id="btn_fadeto">FADETO</button><!-- 使用jQuery进行元素的隐藏与显示的基本格式是： $(selector).event(speed,callback) --><!-- 其实jQuery的很多效果都是这样的用法，比如淡入淡出的效果也是这样的参数 -->

  <script type="text/javascript">
    $(document).ready(function(){
      $("#btn_fadein").click(function(){         //淡入淡出的效果展示
        $("#p2").fadeIn(1000);
      });
      $("#btn_fadeout").click(function(){
        $("#p2").fadeOut(1000);
      });
      $("#btn_fadetoggle").click(function(){
        $("#p2").fadeToggle(1000);
      });
      $("#btn_fadeto").click(function(){
        $("#p2").fadeTo("slow",0.5);          //注意slow要加上引号！！，前两个参数是必须要传入的
      });
    });  </script></body></html>

Atas ialah kandungan terperinci jQuery效果实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：有什么angularjs内置的方法Artikel seterusnya：ajax的简单介绍

Artikel berkaitan

Lihat lagi