首页
所有分类
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 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
微信小程序 密码输入（源码下载）
Jun 27 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
微信小程序实现日历效果
Dec 28 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 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
JAVA面试题(401) PHP面试题(54) 约旦购物网站(1) 哈萨克斯坦购物网站(2) 马耳他购物网站(1) 罗马尼亚购物网站(10) C++面试题(199) 冰岛购物网站(1) 白俄罗斯购物网站(3) 保加利亚购物网站(3)
You might like
example2.php
2006/10/09 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP实现事件机制的方法
2015/07/10 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
2014/01/02 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
[02:43]2018DOTA2亚洲邀请赛主赛事首日TOP5
2018/04/04 DOTA
python del()函数用法
2013/03/24 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
销售会计工作职责
2013/12/02 职场文书
秘书专业自荐信范文
2013/12/26 职场文书
初中美术教学反思
2014/01/29 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
节水口号标语
2014/06/19 职场文书
班主任自我评价范文
2015/03/11 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle