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 ...
随机推荐
- URL - Fiddler - IIS
URL和URI URI:Uniform Resource Identifier,唯一标识一个网络资源 URL:Uniform Resource Locator,指向网络资源地址 URL是URI的子集, ...
- logstash+elasticsearch+kibana搭建日志收集分析系统
来源: http://blog.csdn.net/xifeijian/article/details/50829617 日志监控和分析在保障业务稳定运行时,起到了很重要的作用,不过一般情况下日志都分散 ...
- storedownloadd占用cpu高
禁用App Store的自动更新
- python将一个字符串写入文件中的编码问题
python2将一个字符串写入文件中: 1.如果字符串是str类型 # -*- coding:utf-8 -*- txtFile="今天天气不错" name = "1.t ...
- 【tomcat】同一个服务器，搭建多个tomcat服务
1. 下载apache-tomcat-7.0.63,下载地址:http://tomcat.apache.org/download-70.cgi下载下来的文件为apache-tomcat-7.0.63. ...
- 0009SpringBoot静态资源访问路径
访问静态资源: 静态资源需要放在哪些路径下才能被访问呢: 通过WebMvcAutoConfiguration.java中 addResourceHandlers()方法查找绑定的路径,一个是通过web ...
- appium+python 【Mac】UI自动化测试封装框架流程简介 <一>
为了多人之间更方便的协作,那么框架本身的结构和编写方式将变得很重要,因此每个团队都有适合自己的框架.如下本人对APP的UI自动化测试的框架进行进行了简单的汇总.主要目的是为了让团队中的其余人员接手写脚 ...
- python-windows安装相关问题
1.python的环境配置,有些时候是没有配置的,需要在[系统环境]-[path]里添加. 2.安装pip:从官网下载pip包,然后到包目录==>python setup.py install ...
- 用strtotime()和date()函数算出2019年9月的周日日期
strtotime---用于接收两个参数,第一个参数是格式化的日期数据如:date('Y-m-d'),第二个参数有如'+7 day' 函数版 <?php $firstsunday = strto ...
- 2019HDU多校第六场1009 Three Investigators——杨表
题意 给定一个 n 个元素的数列,从前 k 个元素中取5次不下降子序列,求取得的和的最大值(k从1至n) 分析 考虑将数字 a[i] 拆成 a[i] 个 a[i],比如 “4,1,2”→“4,4,4, ...