来自 计算机教程 2019-08-15 20:52 的文章
当前位置: 美洲杯冠军竞猜 > 计算机教程 > 正文

jQuery控制元素隐藏和显示篮球世界杯冠军竞猜

1、jQuery隐藏和显示效果

本文实例为大家分享了jquery中show()、hide()和toggle()用法实例,供大家参考,具体内容如下

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>初识jQuery</title> 
<script src="http:/www.jb51.net/jquery/1.9.0/jquery.js" type="text/javascript"></script> 
<!--引用这个jquery库--> 

<style> 
#test{ 
  display:none; 
  width:120px; 
  height:50px; 
  border:1px solid blue; 
   } 
</style> 
</head> 

  <body> 
    <div id="test">Hello world!</div> 
    <!--设置三个按钮,每次点击调用特定的函数--> 
    <button onclick="sayHello()">点我打开!</button> 
    <button onclick="sayGoodbye()">点我关闭!</button> 
    <button onclick="change()">点我切换!</button> 

    <script type="text/javascript"> 
      function sayHello(){ 
        $("#test").show(5000); 
      <!--设参数5000,表示用5000ms的时间完成这个动作-->  
      } 

       function sayGoodbye(){ 
        $("#test").hide(); 
      <!--不设置,默认速度--> 
      } 

       function change(){ 
        $("#test").toggle("slow"); 
      <!--设置以slow的速度打开--> 
      } 
    </script> 
  </body> 
</html> 
$("#hide").click(function(){
 $("p").hide();
}); //点击id="hide"元素时,隐藏所有<p>标签内容;

$("#show").click(function(){
 $("p").show();
}); //点击id="show"元素时,显示所有<p>标签内容;

效果图:

2、jQuery淡入淡出效果

篮球世界杯冠军竞猜 1

通过 jQuery,您可以实现元素的淡入淡出效果。

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

jQuery 拥有下面四种 fade 方法:

您可能感兴趣的文章:

  1. fadeIn()
  2. fadeOut()
  3. fadeToggle()
  4. fadeTo()
//jQuery fadeIn() 用于淡入已隐藏的元素;
$(selector).fadeIn(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
}); //点击<button>按钮时,不同效果的淡入id分别为"div1,div2,div3"的元素;
//jQuery fadeOut() 方法用于淡出可见元素;
$(selector).fadeOut(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeOut();
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
}); //点击<button>按钮时,不同效果的淡出id分别为"div1,div2,div3"的元素;
//jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换;
//如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;
//如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果;
$(selector).fadeToggle(speed,callback);
//speed(可选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeToggle();
 $("#div2").fadeToggle("slow");
 $("#div3").fadeToggle(3000);
}); //点击<button>按钮时,不同效果的淡出淡入id分别为"div1,div2,div3"的元素;
//jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间);
$(selector).fadeTo(speed,opacity,callback);
//speed(必选)参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;
//opacity(必选)参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间);
//callback(可选) 参数是 fading 完成后所执行的函数名称;
$("button").click(function(){
 $("#div1").fadeTo("slow",0.15);
 $("#div2").fadeTo("slow",0.4);
 $("#div3").fadeTo("slow",0.7);
}); //点击<button>按钮时,以给出的不透明度淡入淡出id分别为"div1,div2,div3"的元素;

本文由美洲杯冠军竞猜发布于计算机教程,转载请注明出处:jQuery控制元素隐藏和显示篮球世界杯冠军竞猜

关键词: