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. 使用消息来处理多线程程序中的一些问题
  2. Oracle技术之Data Pump介绍
  3. javascript判断ie浏览器
  4. 机器学习第4天:线性回归及梯度下降
  5. oracle上机题库_Oracle数据库考试试题库
  6. Dom4j遍历解析XML测试
  7. 设计算法时要确保分类讨论的完备性
  8. 审计系统---堡垒机python下ssh的使用
  9. springboot中配置过滤器以及可能出现的问题
  10. Android 系统各个版本上https的抓包
  11. 阶段3 3.SpringMVC·_03.SpringMVC常用注解_7 ModelAttribute注解
  12. 无盘机房服务器配置,无盘工作站机房的组建
  13. Python编译与反编译.exe
  14. 计算机键盘能直接接手机吗,手机变电脑!智能手机外接键盘和鼠标的3种方法...
  15. WT2003H语音芯片在红绿灯上的运用,一款可远程更新的语音IC方案
  16. python有道云笔记_Python自动同步有道云笔记到Hexo
  17. Ubuntu 20.04 安装 Seismic Unix
  18. Verilog语言- 和c语言的区别
  19. 配置微信小程序开发分享朋友圈功能
  20. stm32的内存分布

热门文章

  1. OCR(Optical Character Recognition 光学字符识别)扫盲
  2. 每个Windows用户都应该知道的10个命令提示符技巧
  3. 基于UG电动汽车传动系统减速器方案优化设计【说明书(论文)+任务书++CAD图纸+答辩稿】
  4. Android 基于USB_BUIK 触摸驱动
  5. 2018-2019-2 20165330《网络对抗技术》Exp4 恶意代码分析
  6. (跟我一起来学区块链(1.3))之区块链的起源与发展
  7. .NET开源工作流RoadFlow-表单设计-隐藏域
  8. 计算机专业考研真题,计算机专业考研真题讲解
  9. 用Python爬虫技术怎么挣点小钱,这四种方法可行
  10. 项目四 无线网络配置(使用华为模拟器eNSP)