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 ...
随机推荐
- JAVA基于PDF box将PDF转为图片
在一项目中用到,本身我是.NET的,团队中有用到JAVA,故此我处理这个功能,记录以下备用. 1.引用:fontbox-2.0.16.jar.pdfbox-app-2.0.16.jar 版本一定要正确 ...
- 【微信网页直接下载app】微信跳转-微信浏览器中直接唤起本地浏览器和App
文档传送门:https://github.com/EthanOrange/wechat-redirect demo: http://wxredirect.jslab.fun/call-app
- Oracle 数据 查询 一对多 取最新一条非 0 数据
主键id 待查字段 日期 1 6 2019/5/1 1 0 2019/5/2 需求: 找出 ...
- storedownloadd占用cpu高
禁用App Store的自动更新
- python之列表、元组
Day 2-Morning 创建列表 创建列表和创建普通变量一样,用中括号括起一堆数据即可(这里的数据可以是整型.字符串.浮点型...甚至可以包含另一个列表),数据间用逗号隔开. eg:number= ...
- synchronized 和 volatile 的区别是什么？（未完成）
synchronized 和 volatile 的区别是什么?(未完成)
- 说一下 runnable 和 callable 有什么区别？（未完成）
说一下 runnable 和 callable 有什么区别?(未完成)
- Week08_day01 (Hive实现按照指定格式输出每七天的消费平均数)
Hive实现按照指定格式输出每七天的消费平均数 数据准备 2018/6/1,10 2018/6/2,11 2018/6/3,11 2018/6/4,12 2018/6/5,14 2018/6/6,15 ...
- python画图matplolib
http://python.jobbole.com/85106/ 1.画二维图 2.画三维图 我的电脑只能在jupyter notebook上面运行才能看的到,常规import库 %matplotli ...
- Node.js 调试小技巧
小技巧--使用 supervisor如果你有 PHP 开发经验,会习惯在修改 PHP 脚本后直接刷新浏览器以观察结果,而你在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一 ...