slideToggle()

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

案例展示:

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>div {width: 200px;margin: auto;}.HP_JQuery {background-color: #ff0000;}.txt_content {background-color: #00ffff;}</style><script src="../Scripts/jquery-1.11.3.js"></script><script>$(function () {//点击标题 显示与隐藏 文本内容$("#cool .HP_JQuery").click(function () {//用600毫秒缓慢的将段落滑上或滑下$(".txt_content").slideToggle("slow");});});</script>
</head>
<body><div id="cool"><h4 class="HP_JQuery">什么是JQuery?</h4><div class="txt_content">jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。</div></div>
</body>
</html>

效果图:

点击“什么是JQuery?” 现实与隐藏 内容

jQuery 使用slideToggle()滑动显示隐藏相关推荐

  1. jQuery的几种显示隐藏方法

    jQuery显示隐藏方法 hide()方法 元素隐藏,隐藏的前提必须是元素display:block: show()方法 元素显示,显示的前提必须是元素display:none; toggle()方法 ...

  2. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  3. html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】

    效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...

  4. javascript和jquery实现页面元素显示/隐藏切换的方法

    一.javascript实现 方法一: document.getElementById("idname").style.visibility="hidden"; ...

  5. jQuery 入门教程(5): 显示/隐藏内容

    2019独角兽企业重金招聘Python工程师标准>>> jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show() 可以 ...

  6. jquery根据滚动像素显示隐藏顶部导航条

    本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...

  7. 动态控制jQuery easyui datagrid工具栏显示隐藏

    //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).h ...

  8. jquery关于多个显示隐藏

    今天做了一个关于多个栏目的隐藏与显示,内容为初始化显示6个栏目,点击按钮显示所有的栏目,在次点击隐藏出现的栏目 <div class="ftlt_z_navigation acer&q ...

  9. 手机端zepto.js点击滑动显示隐藏

    var btn1 = $('.wtw-btn1') //弹框一function box1(value1,value2){let str = '<div class="wtw-pop w ...

最新文章

  1. 关于WSAEWOULDBLOCK和WSA_IO_PENDING错误
  2. #279. [SYZOI Round1] 滑稽♂树(树状数组套主席树)
  3. java职业技能了解精通_如何通过精通数字分析来提升职业生涯的发展,第8部分...
  4. python审批流系统_有赞移动关于权限与审批流程的标准化
  5. 缺少 mysql 扩展_解决phpmyadmin中缺少mysqli扩展问题的方法
  6. 有趣 的java代码_[分享]几段有趣的JAVA代码
  7. SPSS实现多元方差分析
  8. opencv接受树莓派usb摄像头rtsp视频流
  9. 拉盖尔多项式的正交性
  10. 产品经理需要看懂接口文档么?
  11. 【产品】 产品设计:ID工业设计、MD结构设计、HW硬件设计和SW软件设计详解
  12. 【墙角数枝梅,凌寒独自开】代码改变未来
  13. CAD -2012软件安装的讲解
  14. 获得屏幕的宽度和高度
  15. 启动hfds文件系统,普通用户查看不到jps中的服务进程,但是root用户可以【该问题已经解决】
  16. R语言当前文件工作路径
  17. DC基础知识介绍-Design Compiler(二)
  18. 五邑大学安卓开发程序设计报告_五邑大学模拟电路课程设计报告模板.docx
  19. Python 使用摄像头监测心率!这么强吗?
  20. BackTrack 5 notes

热门文章

  1. hive常用内部函数
  2. 【C语言基础练习】代码实现将任意长度的整形数逆序。(例:123456逆序后为654321)
  3. 批处理禁用、启用USB设备如此简单
  4. 如何写好年度总结PPT? by 傅一平
  5. luajit环境异常
  6. Bugtags工具试用过程笔记
  7. 01-AI算法开发的全流程
  8. 使用mock.js提供模拟数据
  9. linux服务器运行停止Jar包Shell脚本编写
  10. 2022~2023年杂记之