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的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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 文件上传源码分析(RFC1867)
2009/10/30 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
jquery 插件学习(五)
2012/08/06 Javascript
js DOM 元素ID就是全局变量
2012/09/20 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
大二自我鉴定范文
2013/10/05 职场文书
求职信模版
2013/11/30 职场文书
小学教师个人总结
2015/02/05 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js
JS前端宏任务微任务及Event Loop使用详解
2022/07/23 Javascript