jQuery动画显示和隐藏效果实例演示(附demo源码下载)


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery动画显示和隐藏效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery动画显示和隐藏效果实例演示(附demo源码下载)

点击此处查看在线演示。

完整实例代码点击此处本站下载。

具体代码如下:

<!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>JQuery 动画显示和隐藏效果</title>
<script>
 /*
  1.$("页面元素类型").show(时间, 回调函数);以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数;指定时间后依次执行回调函数,页面上能找到几个,就连着执行几次。时间可以为毫秒数,也可以是slow,nomal,fast
  2.$("页面元素").toggle();切换此元素的显示状态。如果它是显示的,让它隐藏,如果它是隐藏的,让它显示。
  3.$("页面元素").slideDown(时间,回调函数)通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
  4.$("页面元素").fadeIn(时间,回调函数)通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
 */
</script>
<script language="javascript" src="jquery1.3.2.js" ></script>
<script>
 function test_show() {
  //$("#myImage").show(2000,function(){alert("演示完毕!");});
  $("img").show(2000,function(){alert("演示完毕!");});
 }
 function test_hide() {
  //$("#myImage").hide(2000,function(){alert("演示完毕!");});
  $("img").hide(2000,function(){alert("演示完毕!");});
 }
 function test_slideDown() {
  $("#myImage2").slideDown(500,function(){alert("滑动向下放大完毕");});
 }
 function test_slideUp() {
  $("#myImage2").slideUp(2000,function(){alert("滑动向上缩小完毕");});
 }
 function test_slideToggle() {
  $("#myImage2").slideToggle(1000,function(){alert("切换滑动效果完毕");});
 }
 function test_fadeIn() {
  $("#myImage3").fadeIn(2000,function(){alert("淡入完毕");});
 }
 function test_fadeOut() {
  $("#myImage3").fadeOut(2000,function(){alert("淡出完毕");});
 }
 function test_fadeTo() {
  $("#myImage3").fadeTo(2000,0.25,function(){alert("调整到指定透明度完毕");});
 }
</script>
</head>
<body>
<div>
 <input type="button" value="显示" onClick="$('p').show();" />
 <input type="button" value="隐藏" onClick="$('p').hide();" />
 |||     
 <input type="button" value="延时显示" onClick="test_show()" />
 <input type="button" value="延时隐藏" onClick="test_hide()" />
 <input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" />
 |||     
 <input type="button" value="滑动向下放大" onClick="test_slideDown()" />
 <input type="button" value="滑动向上缩小" onClick="test_slideUp()" />
 <input type="button" value="切换滑动效果" onClick="test_slideToggle()" />
 |||     
 <input type="button" value="淡入" onClick="test_fadeIn()" />
 <input type="button" value="淡出" onClick="test_fadeOut()" />
 <input type="button" value="调整到指定透明度" onClick="test_fadeTo()" />
</div>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <p style="display:none">Hello World!</p>
 <img id="myImage" src="images/11.jpg" style="display:none" />
 <img id="myImage1" src="images/1.jpg" style="display:none" />
 <img id="myImage2" src="images/2.jpg" style="display:none" />
 <img id="myImage3" src="images/3.jpg" style="display:none" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
解决eclipse中没有js代码提示的问题
Oct 10 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
详解javascript高级定时器
Dec 31 #Javascript
jQuery动画效果相关方法实例分析
Dec 31 #Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 #Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 #Javascript
jQuery语法小结(超实用)
Dec 31 #Javascript
解决JS无法调用Controller问题的方法
Dec 31 #Javascript
简单谈谈JavaScript的同步与异步
Dec 31 #Javascript
You might like
php输出xml格式字符串(用的这个)
2012/07/12 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php中session定期自动清理的方法
2015/11/12 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
python如何统计序列中元素
2020/07/31 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
20行python代码实现人脸识别
2019/05/05 Python
Python银行系统实战源码
2019/10/25 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
幼儿园教研活动总结
2014/04/30 职场文书
监察建议书格式
2014/05/19 职场文书
2014年团支书工作总结
2014/11/14 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
学校通报表扬范文
2015/05/04 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
外出学习心得体会范文
2016/01/18 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL