隐藏与显示

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.     <script src="jquery-3.1.0.min.js"></script>
  7.     <script src="myjs.js"></script>
  8.  </head>
  9.  <body>
  10.      <p>hello</p>
  11.      <button id="hide">隐藏</button>
  12.      <button id="show">显示</button>
  13.  </body>
  14.  </html>

myjs.js

  1.  $(document).ready(function(){
  2.      $("#hide").click(function(){
  3.          $("p").hide();//点击按钮后1秒隐藏
  4.      });
  5.      $("#show").click(function(){
  6.          $("p").show();//点击按钮后1秒显示
  7.      });
  8.  });

通过上面的代码实现了两个按钮来分别控制p元素的隐藏和显示，控制了时间为1秒，视觉效果比较好
但是大部分的隐藏和显示其实是1个按钮来控制的，如音乐播放器的开始/暂停，所以接下来是一个按钮的效果

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.     <script src="jquery-3.1.0.min.js"></script>
  7.     <script src="myjs.js"></script>
  8.  </head>
  9.  <body>
  10.      <p>hello</p>
  11.      <button id="toggle">隐藏/显示</button>
  12.  </body>
  13.  </html>

myjs.js

  1. $(document).ready(function(){
  2.     $("#toggle").click(function(){
  3.         $("p").toggle();
  4.     });
  5. });

最后来实现这样的一个效果：屏幕上有5个正方形的黄色块状，当点击任意一块时，这块会产生隐藏的缓慢3D动画效果，效果比较好看

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.  <title>Insert title here</title>
  6.     <script src="jquery-3.1.0.min.js"></script>
  7.  
  8.     <link href="style1.css" rel="stylesheet" type="text/css">
  9.  </head>
  10.  <body>
  11.      <script>
  12.         for(var i=;i<;i++){
  13.             $("<div>").appendTo(document.body);
  14.         }
  15.         $("div").click(function(){
  16.            $(this).hide(,function(){
  17.                $(this).remove();
  18.            });
  19.         });
  20.      </script>
  21.  </body>
  22.  </html>

css代码：

  1.  div{
  2.      background:#ece023;
  3.      width:50px;
  4.      height:50px;
  5.      margin:2px;
  6.      float:left;
  7.  }

jQuery效果---隐藏与显示的更多相关文章

  1. jQuery 效果 —— 隐藏和显示

    jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...

  2. jQuery 效果 - 隐藏和显示

    $('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...

  3. jQuery 效果 – 隐藏和显示

    在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...

  4. jQuery效果------隐藏hide()/显示show()

    hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...

  5. jQuery效果--隐藏和显示

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

  6. jQuery效果-隐藏与显示 小方块的移除

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  7. JQuery效果隐藏/显示

    hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...

  8. jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链

    隐藏和显示 $(selector).hide(speed,callback);  $(selector).show(speed,callback);   可选的 speed 参数规定隐藏/显示的速度, ...

  9. jQuery_效果(隐藏和显示)

    一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...

随机推荐

  1. 去除jquery.min.map 404错误信息

    调试中出现了 jquery.min.map 404 (Not Found) 的js错误信息: 那么jquery.min.map到底是个什么呢? JQuery 官方解释 从 jQuery 1.9.0 版 ...

  2. Android 连接Wifi和创建Wifi热点 demo

    android的热点功能不可见,用了反射的技术搞定之外. Eclipse设置语言为utf-8才能查看中文注释 上代码: MainActivity.java package com.widget.hot ...

  3. HTML学习(1)

    1.缩写和首字母缩写<abbr><acronym> <abbr title="etcetera">etc.</abbr> <a ...

  4. 各种乱码，编码问题设置方法整理（UTF-8）

    一.tomcat中文乱码问题 打开tomcat安装目录,在conf文件夹中找到server.xml文件 ,找到   <Connector port="8009" protoc ...

  5. linux的sudo apt-get install 和dpkg -i <package.deb>命令

    ubuntu统一的安装软件命令 sudo apt-get install ** sudo dpkg -i <package.deb>

  6. https大势已来？看腾讯专家如何在高并发压测中支持https

    WeTest 导读 用epoll编写一个高并发网络程序是很常见的任务,但在epoll中加入ssl层的支持则是一个不常见的场景.腾讯WeTest服务器压力测产品,在用户反馈中收到了不少支持https协议 ...

  7. Cacti监控Windows主机，Windows主机的正确配置

    使用cacti监控Windows主机的时候经常遇到无法获取Windows主机的snmp信息和Windows主机的硬件信息,主要原因是Windows主机没有正确配置snmp,以下是正确的配置步骤:1.安 ...

  8. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

  9. 使用HTML5 API(AudioContext)实现可视化频谱效果

    如今的HTML5技术正让网页变得越来越强大,通过其Canvas标签与AudioContext对象可以轻松实现之前在Flash或Native App中才能实现的频谱指示器的功能. Demo: Cyand ...

  10. ios nslog 打印字典为中文

    #import <Foundation/Foundation.h> @implementation NSDictionary (Log) - (NSString *)description ...