Jquery中使用show()与hide()方法动画显示和隐藏图片


Posted in Javascript onOctober 08, 2015

(1)功能描述

在页面中单击“显示”连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式;单击已显示的图片时,通过hide()以动画的方式隐藏该图片。

(2)实现代码

<!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>
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
<style type="text/css">
  body{font-size:13px}
  img{display:none;cursor:pointer}
</style>
<script type="text/javascript" >
  $(function(){
    $("a").click(function(){ //显示连接
      $("img").show(3000,function(){
        $(this).css("border","solid 1px #ccc");
        })
      })
      $("img").click(function(){
        $(this).hide(3000);
        })
    })
</script>

</head>

<body>
  <a href="javascript:void(0)">显示</a>
  <img src="Images/dezai.jpg" />
</body>
</html>

动画方式慢慢显示

Jquery中使用show()与hide()方法动画显示和隐藏图片

jquery hide(),show()方法用法详解

语法

$(selector).hide(speed,callback)
speed带有三个效果参数 •毫秒 (比如 1500)
•"slow"
•"normal"
•"fast"

在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度.

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide();
 });
 $(".btn2").click(function(){
 $("p").show();
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

这个就是超简单的显示与隐藏了,如果要有效果我们只要在hide或show中带时间或参数即可

<script type="text/javascript">
$(document).ready(function(){
 $(".btn1").click(function(){
 $("p").hide(1000);
 });
 $(".btn2").click(function(){
 $("p").show(1000);
 });
});
</script>

最后总结一个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>
<script src="jquery_last.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function(){});
function hiden(){
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle(){
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show(){
$("#divObj").show();//显示,参数说明同上
}
function toggle(){
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide(){
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()"/>
 <input type="button" value="显示" onclick="show()"/>
 <input type="button" value="窗帘效果显示2" onclick="slide()"/>
 <input type="button" value="窗帘效果的切换" onclick="slideToggle()"/>
 <input type="button" value="隐藏显示效果切换" onclick="toggle()"/>
<div id="divObj" style="display:none">
    1.测试例子<br/>
    2.测试例子<br/>
    3.测试例子<br/>
    4.测试例子<br/>
    5.测试例子<br/>
    6.测试例子<br/>
    7.测试例子<br/>
    8.测试例子<br/>
    9.测试例子<br/>
    0.测试例子<br/>
  </div>
</body>
</html>

以上内容就是小编跟大家分享的Jquery中使用show()与hide()方法动画显示和隐藏图片,希望大家喜欢。

Javascript 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 #Javascript
js小数运算出现多位小数如何解决
Oct 08 #Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
You might like
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python并发:多线程与多进程的详解
2019/01/24 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
python轮询机制控制led实例
2020/05/03 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
销售代理协议书
2014/09/30 职场文书
五好家庭申报材料
2014/12/20 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
学术会议邀请函
2015/01/30 职场文书
Python基础知识之变量的详解
2021/04/14 Python
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Vue Element plus使用方法梳理
2022/12/24 Vue.js