首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
Swiper实现导航栏滚动效果
Oct 16 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
数据类型(8) Bean(3) 入门基础(1) Vmware(3) IOC(3) Geospatial(1) Hash(1) 触发器(3) RabbitMQ(3) XML(1)
You might like
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php的debug相关函数用法示例
2016/07/11 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
禁止刷新，回退的JS
2006/11/25 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
nodejs文件操作模块FS（File System）常用函数简明总结
2014/06/05 NodeJs
javascript实现一个数值加法函数
2015/06/26 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
详解jquery事件delegate(）的使用方法
2016/01/25 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
Sarenza德国：法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
Jones New York官网：美国女装品牌，受白领女性欢迎
2019/11/26 全球购物
澳大利亚在线床零售商：Bedworks
2020/09/01 全球购物
学术会议邀请函范文
2014/01/22 职场文书
合作意向书格式及范文
2014/03/31 职场文书
党员目标管理责任书
2014/07/25 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android