jQuery效果---隐藏与显示
隐藏与显示
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
myjs.js
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();//点击按钮后1秒隐藏
});
$("#show").click(function(){
$("p").show();//点击按钮后1秒显示
});
});
通过上面的代码实现了两个按钮来分别控制p元素的隐藏和显示，控制了时间为1秒，视觉效果比较好
但是大部分的隐藏和显示其实是1个按钮来控制的，如音乐播放器的开始/暂停，所以接下来是一个按钮的效果
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script>
<script src="myjs.js"></script>
</head>
<body>
<p>hello</p>
<button id="toggle">隐藏/显示</button>
</body>
</html>
myjs.js
$(document).ready(function(){
$("#toggle").click(function(){
$("p").toggle();
});
});
最后来实现这样的一个效果：屏幕上有5个正方形的黄色块状，当点击任意一块时，这块会产生隐藏的缓慢3D动画效果，效果比较好看
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-3.1.0.min.js"></script> <link href="style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
for(var i=;i<;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function(){
$(this).hide(,function(){
$(this).remove();
});
});
</script>
</body>
</html>
css代码：
div{
background:#ece023;
width:50px;
height:50px;
margin:2px;
float:left;
}
jQuery效果---隐藏与显示的更多相关文章
- jQuery 效果 —— 隐藏和显示
jQuery 效果 -- 隐藏和显示 1.隐藏和显示 (1)在jQuery中我们可以使用hide()和show()分别隐藏和显示HTML元素: //隐藏元素 $("button") ...
- jQuery 效果 - 隐藏和显示
$('...').hide();//隐藏 $('...').show();//显示 以上使用需要针对特定的功能单独使用,如果是混用,那么就要有标志位去实现,而通常两者更高级的一步到位实现: $('.. ...
- jQuery 效果 – 隐藏和显示
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,以及使用 toggle() 方法能够切换 hide() 和 show() 方法. 隐藏.显示.切换,滑动 ...
- jQuery效果------隐藏hide()/显示show()
hide()和show() hide():隐藏文本. show():显示文本. 语法: $(selector).hide(speed,callback); $(selector).show(speed ...
- jQuery效果--隐藏和显示
jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: $("#hide").click( ...
- jQuery效果-隐藏与显示 小方块的移除
html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- JQuery效果隐藏/显示
hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 sp ...
- jquery02-jQuery效果=隐藏和显示+切换+淡入淡出+滑动+动画+回调+链
隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); 可选的 speed 参数规定隐藏/显示的速度, ...
- jQuery_效果(隐藏和显示)
一.jQuery hide() 显示和 show()隐藏 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <script type=" ...
随机推荐
- JavaScripts学习日记——XML DTD Schema
今日关键词: XML DTD Schema 1.XML 1 XML的概述 1.1 什么是XML XML全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和 ...
- Android应用程序安装与Launcher启动机制
以下资料摘录整理自老罗的Android之旅博客,是对老罗的博客关于Android底层原理的一个抽象的知识概括总结(如有错误欢迎指出)(侵删):http://blog.csdn.net/luoshe ...
- Java设计模式---组合模式
一.组合模式定义 组合模式定义: Compose objects into tree structures to represent part-whole hierarchies. Composite ...
- Oracle按用户进行统计信息更新
按用户进行统计信息更新 PL/sqldev工具使用system用户连接到oracle,打开命令窗口执行以下SQL,用户名请根据实际情况进行更改: begin dbms_stats.gather_sch ...
- 95秀-自定义对话框 dialog 合集
普通的确认对话框 NormalDialog.java import android.app.Dialog; import android.content.Context; import android ...
- POJ2449
#include<stdio.h> #include<iostream> #include<queue> #include<vector> using ...
- 网络断开后重连downloadProvider继续下载问题调试分析
最近在安卓4.4上遇到一个断开wifi后重新连接wifi, downloadProvider继续下载文件失败的问题.于是开始了解下载管理模块的断点续载功能: 1.首先,分析android lo ...
- 重新认识Swift中的可选型(Swift2.1)
//: Playground - noun: a place where people can play import UIKit /* Swift中nil代表是是另外一种类型, 而不像OC那样, 任 ...
- a标签增加onclick事件提示未定义function
项目使用的是ext框架,版本是ext4.2 出现的问题代码如下: renderer : function(value){ var html = "<a href=\"java ...
- XMLHttpRequest state以及readystate的对应值
status状态值长整形标准http状态码,定义如下: Number Description 100 Continue101 Switching PRotocols200 OK201 Create ...