jQuery效果---隐藏与显示
2024-08-24 17:27:54
隐藏与显示
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;
}
最新文章
- AngularJS 配置和运行phonecat错误
- Hibernate1
- Jmeter之Badboy录制脚本及简化脚本http请求(三)
- AngularJS - 路由入门
- iOS反射机制
- Redis+MongoDB 最佳实践 做到读写分离 -摘自网络
- 微信小程序的一些限制
- linux运维基础__争取十月前研究的差不多
- CSS网页元素居中
- struct2-json
- Spring Boot修改启动端口
- java web(转)
- [POI2012]STU-Well(二分答案+神仙操作)
- UVA 11168 Airport(凸包)
- Locust 分布式测试
- 17秋 SDN课程 第一次作业
- 微信小程序开发1-入门知识准备
- 转载nginx+uwsgi+django
- python入门-WHILE循环
- oh-my-zsh 安装及使用