JQuery实现DIV其他动画效果
来源:互联网 发布:海康域名注册平台 编辑:程序博客网 时间:2024/06/15 19:59
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>
0 0
- JQuery实现DIV其他动画效果
- 实现DIV的其他动画效果
- [第七季]7.实现DIV的其他动画效果
- jQuery动画效果实现
- jquery实现动画效果
- jQuery实现动画效果
- jQuery实现动画效果
- jquery实现动画效果
- JQuery实现动画效果
- jQuery动画效果实现
- JQuery实现DIV拖动效果
- jquery 实现 div 拖动效果
- jquery animate实现动画效果
- jquery实现动画伸缩效果
- jQuery UI实现动画效果
- 使用jquery实现DIV动画移动
- jquery对div实现轮换效果(从上到下...)
- 使用jQuery实现DIV弹出效果
- Remove Duplicates from Sorted Array
- Android动画效果translate、scale、alpha、rotate详解
- 历届试题 错误票据
- Win7下IIS 7的安装配置与文件发布
- 一种合适的智能优化算法
- JQuery实现DIV其他动画效果
- JavaScript之数据类型(转)
- 步骤比较细致的 圣杯布局说明
- 160. Intersection of Two Linked Lists
- java 回调机制分为:异步回调 同步回调
- POJ 1142 (暴力加分治)
- Android----UI
- 《软件架构设计》学习笔记--0--开篇
- universal-image-loader 配置