编程 Javascript

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其他动画效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 定义初始化数组函数

Sep 07 Javascript

jQuery EasyUI 中文API Button使用实例

Apr 14 Javascript

jQuery :nth-child前有无空格的区别分析

Jul 11 Javascript

js禁止小键盘输入数字功能代码

Aug 01 Javascript

基于jQuery的计算文本框字数的代码

Jun 06 Javascript

基于javascript实现tab选项卡切换特效调试笔记

Mar 30 Javascript

vuejs在解析时出现闪烁的原因及防止闪烁的方法

Sep 19 Javascript

AngularJS ngModel实现指令与输入直接的数据通信

Sep 21 Javascript

Parcel 打包示例(React HelloWorld)

Jan 16 Javascript

详解从Vue-router到html5的pushState

Jul 21 Javascript

从组件封装看Vue的作用域插槽的实现

Feb 12 Javascript

Node.js控制台彩色输出的方法与原理实例详解

Dec 01 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

php获取文件夹路径内的图片以及分页显示示例

2014/03/11 PHP

ThinkPHP实现更新数据实例详解(demo)

2016/06/29 PHP

In Javascript Class, how to call the prototype method.(three method)

2007/01/09 Javascript

用javascript实现画板的代码

2007/09/05 Javascript

javascript 自动填写表单的实现方法

2010/04/09 Javascript

js opener的使用详解

2014/01/11 Javascript

js控制href内容的连接内容的变化示例

2014/04/30 Javascript

控制台报错object is not a function的解决方法

2014/08/24 Javascript

text-align:justify实现文本两端对齐兼容IE

2015/08/19 Javascript

jquery彩色投票进度条简单实例演示

2020/07/23 Javascript

一个字符串中出现次数最多的字符统计这个次数【实现代码】

2016/04/29 Javascript

全面解析jQuery $(document).ready()和JavaScript onload事件

2016/06/08 Javascript

JS函数多个参数默认值指定方法分析

2016/11/28 Javascript

JS中用try catch对代码运行的性能影响分析

2016/12/26 Javascript

node.js的事件机制

2017/02/08 Javascript

基于bootstrap按钮式下拉菜单组件的搜索建议插件

2017/03/25 Javascript

Javascript中的getter和setter初识

2017/08/17 Javascript

vue2.0 子组件改变props值,并向父组件传值的方法

2018/03/01 Javascript

vue项目中使用AES实现密码加密解密（ECB和CBC两种模式）

2019/08/12 Javascript

js针对图片加载失败的处理方法分析

2019/08/24 Javascript

layui操作列按钮个数和文字颜色的判断实例

2019/09/11 Javascript

[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局

2016/02/25 DOTA

Python collections模块实例讲解

2014/04/07 Python

一步步教你用Python实现2048小游戏

2017/01/19 Python

十分钟利用Python制作属于你自己的个性logo

2018/05/07 Python

python 统计一个列表当中的每一个元素出现了多少次的方法

2018/11/14 Python

python实现停车管理系统

2018/11/30 Python

Python使用paramiko操作linux的方法讲解

2019/02/25 Python

python区块及区块链的开发详解

2019/07/03 Python

Ellos瑞典官网：北欧地区时尚、美容和住宅领域领先的电子商务网站

2019/11/21 全球购物

如何提高MySql的安全性

2014/06/19 面试题

幼儿教师自我鉴定

2013/11/02 职场文书

协议书与合同的区别

2014/04/18 职场文书

民政工作个人总结

2015/02/28 职场文书

暗恋桃花源观后感

2015/06/12 职场文书

2015国庆节放假通知范文

2015/07/30 职场文书