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 ...
随机推荐
- 4.闭锁 CountDownLatch
/*CountDownLatch 闭锁*/ CountDownLatch 是一各同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待 闭锁可以延迟线程的进度 直到 其到达终 ...
- fcrackzip破解zip密码
kail系统里有fcrackzip工具,可以对设置密码的压缩包zip直接进行破解,不用字典,直接进行暴力破解. fcrackzip 所用到的参数介绍如下:-b 表示暴力破解-c 表示暴力破解中使用的字 ...
- centos搭建集群
centos 搭建集群步骤 1.使用yum安装所需要的工具 yum -y install wget vim tcl gcc make 2.下载redis并解压 cd /usr/local wget h ...
- 爬虫如何发现更多的url呢,怎么动态收集新的url连接
大家在做爬虫采集数据的时候很多都会遇到增量采集的问题,有些时候是通过过滤url来进行的,有些是通过爬取网页后再进行分析判断, 以上这些过程也许大部分做爬虫的都会这么做,各位有没有想过, 除了以上的常用 ...
- 关于Linux、python的PDF书籍整理（附带亲测的 IT 电子书网站）
[18.1.3][在博客园发的文章不是很多呢,接下来的博客会转移到独立的个人博客网站上去了,具体的学习笔记和内容都会在独立网站上发布,后期还会有博主的个人资源库和教程还有独立网盘存储(可以关注一波哈) ...
- 【转】SpringBoot自定义序列化的使用方式--WebMvcConfigurationSupport
场景及需求: 项目接入了SpringBoot开发,现在需求是服务端接口返回的字段如果为空,那么自动转为空字符串. 例如:[ { "id": 1, ...
- vimrc config and NERDTree
nmap <C-N> :tabnext<CR> 下载和配置 NERDTree插件的官方地址如下,可以从这里获取最新的版本 https://github.com/scrooloo ...
- [转载]Appium工作原理
[Appium]Appium工作原理 2017-09-13 15:28 sophia194910 阅读(7658) 评论(0) 编辑 收藏 参考:http://www.cnblogs.com/zhjs ...
- 从客户端中检测到有潜在危险的 request.form值
这里只说ASP.NET MVC的解决方法,ASP.NET已经不碰了. 给控制器加上[ValidateInput(false)]特性即可忽略含有HTML标记的内容. [HttpPost] [Valida ...
- Node.js Websocket 区分不同的用户
实现ws://serverIP:port/:param1/:param2 .通过param1,param2来管理不同的ws回话,以便实现群发和指定用户的消息推送 npm install ws --sa ...