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 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
JS实现分页导航效果
Feb 19 Javascript
JS遍历树层级关系实现原理解析
Aug 31 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python opencv实现证件照换底功能
2019/08/19 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
酒店总经理工作职责
2013/12/13 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
公司地址变更通知
2015/04/25 职场文书
党支部意见范文
2015/06/02 职场文书
有关西游记的读书笔记
2015/06/25 职场文书
大学运动会通讯稿
2015/07/18 职场文书