jQuery控制元素隐藏和显示,jquery控制元素

本文实例讲述了jQuery使用hide方法隐藏元素自身用法,分享给大家供大家参考。具体如下:

jQuery控制元素隐藏和显示,jquery控制元素

1、jQuery隐藏和显示效果

 

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

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

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

 2、jQuery淡入淡出效果

 

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

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • 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"的元素;
    

 3、jQuery滑动效果

 

通过 jQuery,您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法:

  • slideDown()
  • slideUp()
  • slideToggle()

//jQuery slideDown() 方法用于向下滑动元素;

$(selector).slideDown(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideDown();
});     //点击id为flip的元素时,将id为panel的元素向下滑动;

//jQuery slideUp() 方法用于向上滑动元素;

$(selector).slideUp(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideUp();
});     //点击id为flip的元素时,将id为panel的元素向上滑动;

//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换;
//如果元素向下滑动,则 slideToggle() 可向上滑动它们;
//如果元素向上滑动,则 slideToggle() 可向下滑动它们;

$(selector).slideToggle(speed,callback);
//speed(可选)参数规定效果的时长,它可以取以下值:"slow"、"fast" 或毫秒;
//callback(可选)参数是滑动完成后所执行的函数名称;

$("#flip").click(function(){
  $("#panel").slideToggle();
});     //点击id为flip的元素时,将id为panel的元素向上或向下滑动;

 

转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2255816

 

1、jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show()
方法来隐藏和显示 HTML 元素: $(“…

隐藏、显示、切换,滑动,淡入淡出,以及动画,哇哦!

下面的JS代码实现让按钮点击后将自己隐藏起来

实例

jQuery hide()
演示一个简单的 jQuery hide() 方法。

jQuery hide()
另一个 hide() 演示。如何隐藏部分文本。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>

<body>

<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人:张先生<br /> 
北三环中路 100 号<br />
北京</p>
</div>

<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人:David<br /> 
第五大街 200 号<br />
纽约</p>
</div>

</body>
</html>
$.ready{ $.click.hide;This is a headingThis is a paragraph.This is another paragraph.Click me

jQuery hide() 和 show()

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

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮,我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>