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

更新时间：2015年12月31日 11:07:11 作者：it_wangxiangpan

这篇文章主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下

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

运行效果截图如下：

点击此处查看在线演示。

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

具体代码如下：

<!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();" />
 |||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type="button" value="延时显示" onClick="test_show()" />
 <input type="button" value="延时隐藏" onClick="test_hide()" />
 <input type="button" value="切换元素的可见状态" onclick="$('#myImage1').toggle()" />
 |||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <input type="button" value="滑动向下放大" onClick="test_slideDown()" />
 <input type="button" value="滑动向上缩小" onClick="test_slideUp()" />
 <input type="button" value="切换滑动效果" onClick="test_slideToggle()" />
 |||&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <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程序设计有所帮助。

您可能感兴趣的文章:

jquery获取焦点和失去焦点事件代码
鼠标在搜索框中点击的时候里面的文字就消失了，经常会用到搜索框的获得焦点和失去焦点的事件，接下来介绍一下具体代码，感兴趣的朋友额可以参考下
2013-04-04
js/jquery判断浏览器类型的方法小结
有些时候需要根据浏览器来写样式，所以要判断一下浏览器类型，百度了一下，才知道JQuery有个方法直接判断，并附上原生的js的判断方法，分享给大家，有需要的小伙伴可以参考下。
2015-05-05
仿百度的关键词匹配搜索示例
关键词匹配搜索想必大家一定会想到百度，下面有个不错的示例，感兴趣的朋友可以参考下
2013-09-09
jquery遍历select元素(实例讲解)
本篇文章主要是对jquery遍历select元素的实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
jQuery中remove()方法用法实例
这篇文章主要介绍了jQuery中remove()方法用法,以三个不同的实例形式分别演示了remove()方法删除元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery UI 实例讲解 - 日期选择器(Datepicker)
下面小编就为大家带来一篇jQuery UI 实例讲解 - 日期选择器(Datepicker)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
jquery 实现拖动文件上传加载进度条功能
这篇文章主要介绍了jquery 实现拖动文件上传加载进度条功能,主要用到的是HTML5的ondrop事件，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-03-03
jQuery实用技巧必备（下）
这篇文章主要介绍了jQuery必不可少的小技巧，这些小技巧就像是创建的快捷方式，可以帮助大家快速开发，感兴趣的小伙伴们可以参考一下
2015-11-11
使用jQuery获取radio/checkbox组的值的代码收集
很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。看下面的一个小例子。在这个例子中包括了以下几个功能
2009-12-12
jQuery实现的分子运动小球碰撞效果
这篇文章主要介绍了jQuery实现的分子运动小球碰撞效果,涉及jQuery基于定时函数操作页面元素动态变换的技巧,需要的朋友可以参考下
2016-01-01