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 方法：

  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"的元素；

3、jQuery滑动效果

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

jQuery 拥有以下滑动方法：

  1. slideDown()
  2. slideUp()
  3. 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的元素向上或向下滑动；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • jquery显示隐藏元素的实现代码

    $("#id").css('display','none'); $("#id").css('display','block'); 或 $("#id")[0].style.display = 'none'; $("#id")返回的是JQuery 它是个集合肯定没有display属性 $("#firstStep").hide(500);而且可以设置时间:("#firstStep").hide

  • Jquery显示、隐藏元素以及添加删除样式

    复制代码 代码如下: <script type="text/javascript"> $(function () { //当input获取焦点后将其兄弟标签label隐藏 $("input").focus(function () { $(this).siblings("label").hide(); }); }); $(function () { //input元素失去焦点 $("input").blur(func

  • JS加jquery简单实现标签元素的显示或隐藏

    显示: 复制代码 代码如下: var ul = document.getElementById("opinionSelect"); ul.style.display = 'block'; 隐藏:$("#opinionSelect").fadeOut("fast");

  • JQuery显示隐藏页面元素的方法总结

    在jquery中显示隐藏div方法方法有很多种,如比较简单的函数show(),hide(),toggle(),slideDown()然后还有css设置div的style属性都可操作,下面我来介绍. show()方法 显示出隐藏的 <p> 元素. 复制代码 代码如下: $(".btn2").click(function(){   $("p").show(); }); toggle()方法 toggle() 方法切换元素的可见状态. 如果被选元素可见,则隐藏

  • jQuery元素的隐藏与显示实例

    本文实例讲述了jQuery元素的隐藏与显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml">  <head runat="server">      <title></title>      <script type="text/jscript" src="jquery/jqu

  • jQuery判断元素是否显示 是否隐藏的简单实现代码

    jQuery判断元素是否显示 是否隐藏的简单实现代码 var node=$('#id'); 第一种写法 if(node.is(':hidden')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } 第二种写法 if(!node.is(':visible')){ //如果node是隐藏的则显示node元素,否则隐藏 node.show(); }else{ node.hide(); } if(node.is(':visib

  • Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)

    一.隐藏和显示元素 复制代码 代码如下: $('#button_save_12').css('display', 'none');  // 隐藏按钮$('#button_save_12').css('display', 'display');  // 显示按钮 // 或者采取 复制代码 代码如下: $('#button_save_12').hide();$('#button_save_12').show(); 二.设为禁用,只读 复制代码 代码如下: $('#button_save_12').a

  • 怎样判断jQuery当前元素是隐藏还是显示

    $(this).is(":hidden"); //如果元素是隐藏的话,则返回true is挺好用的,他能够用jQuery选择器作为参数,特别是跟jQuery里面的选择器里面那些以冒号开头的筛选符配合使用,实现各种各样的判断.如: ":checked,:hidden"等等.给个例子: <head> <script src="jquery-1.7.1.js" type="text/javascript">&

  • jQuery控制元素隐藏和显示

    1.jQuery隐藏和显示效果 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); //点击id="hide"元素时,隐藏所有<p>标签内容: $("#show").click(function(){ $("p").show(); }); //点击id=

  • jQuery实现侧边栏隐藏与显示的方法详解

    jQuery实现侧边栏隐藏与显示的方法详解

    本文实例讲述了jQuery实现侧边栏隐藏与显示的方法.分享给大家供大家参考,具体如下: web项目中经常会出现左侧侧边栏,右侧显示内容的web页面. 效果如图: 如何实现点击本周食谱,本周食谱的列表隐藏或显示切换,并关闭下周食谱列表显示,点击下周食谱,让下周食谱的列表隐藏切换显示,并关闭本周食谱列表显示 实现思路: 1.布局: 布局顶部的topDiv,左侧的leftDiv(optionDiv,navListUl), 布局右侧的contentDiv. 布局如图: 2.js控制optionDiv和n

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • jquery控制表单输入框显示默认值的方法

    本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)

  • jQuery实现HTML元素隐藏和显示

    jQuery实现HTML元素隐藏和显示

    让我们来模仿一下淘宝网当你搜索某个商品的时候,那种显示全部品牌和显示部分品牌的功能. 首先我们来理清一下思路: 1.一开始需要先隐藏需要隐藏的元素 2.你需要通过jquery获取需要在开始显示的时候需要隐藏的元素对象 3.在页面写一个可以触发点击事件的按钮或者链接,使用jquery为这个按钮或者链接添加点击事件 4.当按钮被点击的时候,获取需要隐藏的对象当前是否隐藏值 5.如果是隐藏的,则使其显示,若不是隐藏的,则让它隐藏. 下面我们来看代码: <html xmlns="http://ww

  • JQuery DIV 动态隐藏和显示的方法

    1. 如果在载入是隐藏: <head> <script language="javascript"> function HideWeekMonth() { $("#tt1").hide(); $("#tt2").hide(); } </script> </head> <body onLoad="HideWeekMonth()"> </body> 2. 动态

  • jQuery实现切换隐藏与显示同时切换图标功能

    HTML代码: <!doctype html> <html> <head> <meta charset=" utf-8"> <title>jq隐藏显示图标切换</title> <!--引入jq文件--> <script type="text/javascript" scr="./js/jquery.min.js"></script> <

  • jQuery简单实现隐藏以及显示特效

    简单的 隐藏以及显示的代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){   $("#hide").click(function

  • select 控制网页内容隐藏于显示的实现代码

    <script> function setChange() { if (document.f.selfs.value == "1") { document.all.tb1.style.display = "block"; } else { document.all.tb1.style.display = "none"; } if (document.f.selfs.value == "2") { document.

随机推荐