jQuery隐藏和显示效果实现

实例

jQuery hide()

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

jQuery hide()

另一个hide()实例。演示如何隐藏文本。

jQuery hide() 和 show()

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

实例

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

语法:

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$("button").click(function(){
$("p").hide(1000);
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){
$("p").toggle();
});

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

赞 (0)

相关推荐

  • jQuery简单实现列表隐藏和显示效果示例

    jQuery简单实现列表隐藏和显示效果示例

    本文实例讲述了jQuery简单实现列表隐藏和显示效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>隐藏和显示</title> <style> *{ padding: 0; margin: 0;} li{ list-style-type: none;} bo

  • JQuery显示、隐藏div的几种方法简明总结

    例子 复制代码 代码如下: $("#top_notice").css("display", "block");//第1种方法  //$("#top_notice").attr("style", "display:block;");//第2种方法  //$("#top_notice").show();//第3种方法 1.给元素换class,来实现隐藏div,前提是换的c

  • Jquery实现显示和隐藏的4种简单方式

    Html代码: 复制代码 代码如下: <div class="topicList"> <h3><span>学习天地</span></h3> <ul> <li>1111111111</li> <li>2222222222</li> <li>333333333</li> <li>4444444444</li> <li&

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

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

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

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

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

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

  • jquery控制页面的展开和隐藏实现方法(推荐)

    [jquery代码]  <script> require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); }); $(".up").click(function(){ $(this).parent().parent().paren

  • jQuery隐藏和显示效果实现

    实例 jQuery hide() 简单的jQuery hide()方法演示. jQuery hide() 另一个hide()实例.演示如何隐藏文本. jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: 实例 $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(

  • jQuery仿淘宝网产品品牌隐藏与显示效果

    jQuery仿淘宝网产品品牌隐藏与显示效果

    本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果.分享给大家供大家参考.具体如下: 这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • jQuery实现基本隐藏与显示效果的方法详解

    jQuery实现基本隐藏与显示效果的方法详解

    本文实例讲述了jQuery实现基本隐藏与显示效果的方法.分享给大家供大家参考,具体如下: jQuery 隐藏/显示 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); eg1: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu

  • jQuery 隐藏/显示效果函数用法实例分析

    本文实例讲述了jQuery 隐藏/显示效果函数用法.分享给大家供大家参考,具体如下: jQuery 效果- 隐藏和显示 jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p"

  • JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果

    本文实例讲述了JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <% String path = request.getContextPath(); String basePath = request.getScheme() +

  • jQuery实现菜单显示效果

    jQuery实现菜单显示效果

    前言 上一篇博客更新了在页面中可以像Excel表格一样输入的表格,这篇博客介绍一下我们经常可以在各大网站看到的菜单栏显示效果的程序. 内容 显示效果: 照例,先上代码, HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/htm

  • jquery隐藏标签和显示标签的实例

    复制代码 代码如下: <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><script language="javascript" type="text/javascript" src="jquery-1.7.2.js"></script><script language=&qu

  • jQuery 隐藏和显示 input 默认值示例

    jQuery 隐藏和显示 input 默认值示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • jquery 隐藏与显示tr标签示例代码

    jquery 隐藏与显示tr标签示例代码

    废话少说 直接上代码 代码是程序员交流的最好方式 哈哈: 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.ge

随机推荐