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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
Vuex的实战使用详解
Oct 31 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
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
PHP开发框架总结收藏
2008/04/24 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
orm获取关联表里的属性值
2016/04/17 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
2017/11/22 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
解决谷歌搜索技术文章时打不开网页问题的python脚本
2013/02/10 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python闭包之返回函数的函数用法示例
2018/01/27 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
销售助理岗位职责
2015/02/11 职场文书
销售督导岗位职责
2015/04/10 职场文书
庆祝教师节主持词
2015/07/06 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
python turtle绘图命令及案例
2021/11/23 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS