css3实现jQuery的slideUp和slideDown效果
最近打算做一些交互优化方面的轮子。虽然轮子别人都弄过，但是自己没弄过。重复造轮子对知识理解还是有好处的。本次轮子如题目。直接代码。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>slideup 和 slideDown效果</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
margin-top: 40px;
width: 200px;
} #box li {
list-style: none;
} #box ul {
transition: all 1s;
overflow: hidden;
height: 0;
} .show {
height: 63px !important;
}
</style>
</head> <body>
<div id="box">
<h2>菜单</h2>
<ul class="show">
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
</div>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$('body').on('click', 'h2', function() {
$("#box ul").toggleClass('show')
})
</script>
</body> </html>
注意：变化的ul需要提前设定height，还有overflow属性。
css3实现jQuery的slideUp和slideDown效果的更多相关文章
- 用原生javascript写出jquery中slideUp和slideDown效果
设置块级元素的CSS属性overflow为hidden,然后动态改变height即可 var header=document.getElementsByTagName('header')[0]; he ...
- jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug
jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...
- JQuery的动画及其幻灯片效果
1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...
- java：JQuery（声明，JQ和JS对象的区别，prop，attr，addClass，offset，trigger，dblclick和change事件，hide，show，toggle，slideUp，slideDown，slideToggle，三种选择器，标签的获取，三张图片的放大与缩小）
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- JQuery+CSS3实现Ajax加载时loading效果
之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...
- 深入学习jQuery的三种常见动画效果
× 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...
- jQuery基础知识--选择器与效果
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...
随机推荐
- SAP UI5应用入口App.controller.js是如何被UI5框架加载的？
首先在UI5应用的manifes.json里,定义了UI5应用的入口视图为App: 调试器里的pending数组的两个元素: 实际上对应了我在App.controller.js里定义的两个依赖: 而a ...
- 从linux和ucos的比较中来看进程这个概念
这种问题就要和ucos结合起来嘛. 程序和进程: 程序:存放在磁盘上的一些列代码和数据的可执行映像,是一个静止的实体. 进程:是一个执行中的程序,它是动态的实体. linux进程的四要素: 1. 有一 ...
- 8.Redis的复制（Master/Slave）
Redis的复制(Master/Slave) a)是什么 行话:也就是我们所说的主从复制,主机数据更新后根据配置和策略,自动同步到备机的master/slaver机制,Master以写为主,Slave ...
- js中拼接html代码时onclick参数问题
一.如果是int类型.可以直接传参 二.如果是字符串类型.需要加上引号 1.使用转义符号\转义引号: (\''+strings+'\') 2.使用" .比如: ("'+strin ...
- 抓包分析工具web版——capanalysis
1.下载安装 官网上,安装在Ubuntu上 2.使用教程 https://blog.51cto.com/chenguang/1325742
- JAVA面试核心教程｜Java面试基础知识点总结
Java中的原始数据类型都有哪些,它们的大小及对应的封装类是什么? byte——1 byte——Byte short——2 bytes——Short int——4 bytes——Integer lon ...
- 【2017-11-26】Linq表连接查询
class Program { static void Main(string[] args) { //Linq创建的数据库上下文对象db DataClasses2DataContext db = n ...
- SNMP OID列表
zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...
- PAT Basic 1088 三人行 (20 分)
子曰:“三人行,必有我师焉.择其善者而从之,其不善者而改之.” 本题给定甲.乙.丙三个人的能力值关系为:甲的能力值确定是 2 位正整数:把甲的能力值的 2 个数字调换位置就是乙的能力值:甲乙两人能力差 ...
- java中的io流总结（一）
知识点:基于抽象基类字节流(InputStream和OutputStream).字符流(Reader和Writer)的特性,处理纯文本文件,优先考虑使用字符流BufferedReader/Buffer ...