jquery 显示和隐藏的三种方式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#btnShow').click(function () {
$('div').show(500);
})
$('#btnHide').click(function () {
$('div').hide(500);
})
$('#btnSlideDown').click(function () {
$('div').slideDown(500);
})
$('#btnSlideUp').click(function () {
$('div').slideUp(500);
})
$('#btnSlideToggle').click(function () {
$('div').slideToggle(1000);
})
$('#btnFadeIn').click(function () {
$('div').fadeIn(500);
})
$('#btnFadeOut').click(function () {
$('div').fadeOut(500);
})
$('#btnFadeToggle').click(function () {
$('div').fadeToggle(1000);
})
})
</script>
</head>
<body>
<input type="button" name="name" value="Show" id="btnShow" />
<input type="button" name="name" value="Hide" id="btnHide"/>
<input type="button" name="name" value="SlideDown" id="btnSlideDown"/>
<input type="button" name="name" value="SlideUp" id="btnSlideUp"/>
<input type="button" name="name" value="SlideToggle" id="btnSlideToggle"/>
<input type="button" name="name" value="FadeIn" id="btnFadeIn"/>
<input type="button" name="name" value="FadeOut" id="btnFadeOut"/>
<input type="button" name="name" value="FadeToggle" id="btnFadeToggle"/>
<div style="width:300px;height:200px;background-color:blue"></div>
</body>
</html>
最新文章
- C语言 &#183; 回文数 &#183; 基础练习
- Photo Shop 修改、维护
- Idea修改js和jsp不用重启
- [转] C#反射设置属性值和获取属性值
- BZOJ1218 [HNOI2003]激光炸弹
- 数据结构-Vector
- mysql保存中文乱码的原因和解决办法
- PIMP模式的理解
- debian下使用siege进行压力测试
- spring @Scheduled 执行2次
- python web——Django架构
- Mybatis之旅第三篇-SqlMapConfig.xml全局配置文件解析
- RESTful杂记
- mysql 基本函数以及初学语句
- django 路由系统中name应用
- Mybatis延迟加载、缓存
- Web、OAuth2/SSO相关拾遗
- unittest单元测试简单介绍
- winform窗体 控件【菜单和工具栏控件】【容器控件】
- 巧用PHP数组函数
热门文章
- Java的面向AOP编程
- php课程 4-16 数组自定义函数(php数组->;桶)
- [转] Valgrind使用
- [TypeScript] Typescript Interfaces vs Aliases Union &; Intersection Types
- Local database deployment problems and fixtures
- java--css+js做的树形菜单(完整版)
- 动态创建Fragment
- 【21.37%】【codeforces 579D】"Or" Game
- padding百分百值是相对谁的百分比
- 利用伪元素before实现自定义checkbox样式