JQuery实现DIV其他动画效果的简单实例


Posted in Javascript onSeptember 18, 2016

1.toggle

切换对象的隐藏和显示,可以用来代替show和hide

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		var msg1;
		var msg2;
		if($("#div1").css("display")=="none")
		{
			msg1="正在显示...";
			msg2="显示完毕!";
		}
		else
		{
			msg1="正在隐藏...";
			msg2="隐藏完毕!";
		}
		$("#info").html(msg1);
		$("#div1").toggle(4000,function(){
			$("#info").html(msg2);
		});
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info">1</div>
<div id="div1"></div>
</body>
</html>

2.fadeIn fadeOut

fadeIn 淡入(本来是隐藏的),fadeOut 淡出(本来是显示的)

fadeOut

淡出的时候 这一块的空间就会被隐藏 而下方的模块会往上移动

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").fadeOut(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

fadeIn

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").fadeIn(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

3.fadeTo

切换到一个指定的透明度:0表示彻底透明,1表示不透明。

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").fadeTo(4000,0.1);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

4.slideUp和slideDown

slideUp:向上滑动隐藏对象

slideDown:向下滑动显示对象(说明本来是隐藏的)

slideUp

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").slideUp(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

slideDown

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").slideDown(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

5.slideToggle

滑动实现对象的隐藏与显示切换

<!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="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").slideToggle(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="变换" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

以上这篇JQuery实现DIV其他动画效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
js创建元素(节点)示例
Jan 02 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
vue router 组件的高级应用实例代码
Apr 08 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
移动端js触摸事件详解
Sep 18 #Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 #Javascript
jQuery向父辈遍历的简单方法
Sep 18 #Javascript
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php生成图片验证码
2015/06/09 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
Jquery常用的方法汇总
2015/09/01 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python中的全局变量如何理解
2020/06/04 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
挑战杯创业计划书的写作指南
2014/01/07 职场文书
文明市民先进事迹
2014/05/15 职场文书
百年校庆感言
2015/08/01 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技