最近打算做一些交互优化方面的轮子。虽然轮子别人都弄过，但是自己没弄过。重复造轮子对知识理解还是有好处的。本次轮子如题目。直接代码。

<!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效果的更多相关文章

  1. 用原生javascript写出jquery中slideUp和slideDown效果

    设置块级元素的CSS属性overflow为hidden,然后动态改变height即可 var header=document.getElementsByTagName('header')[0]; he ...

  2. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  3. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...

  4. JQuery的动画及其幻灯片效果

    1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏. <script type="text/javascript&q ...

  5. 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设计 的宗旨是“ ...

  6. JQuery+CSS3实现封装弹出登录框效果

    原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...

  7. JQuery+CSS3实现Ajax加载时loading效果

    之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了.但是貌似之前使用gif图片的情况比较多,可能是为了兼容各 ...

  8. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  9. jQuery基础知识--选择器与效果

    $(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class ...

随机推荐

  1. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  2. 什么是N+1查询？

    在Session的缓存中存放的是相互关联的对象图.默认情况下,当Hibernate从数据库中加载Customer对象时,会同时加载所有关联的Order对象.以Customer和Order类为例,假定O ...

  3. Flutter中的替换路由、返回到根路由

    替换路由 当我们有三个页面,页面1,页面2,页面3. 期望点击页面1按钮,跳转到页面2,页面2点击返回,跳转到页面1: 点击页面2按钮,跳转到页面3,页面3点击返回,跳转到页面1,而不是页面2. 这时 ...

  4. gojs Diagram Events（图表事件）

    GoJS涵盖了三种基本事件:DiagramEvents(图表事件).InputEvents(输入事件)以及ChangedEvents(变更事件).这一页我们讨论前两种事件:至于最后一种事件请见 Cha ...

  5. Spark（三）角色和搭建

    目录 Spark(三)角色和搭建 一.Spark集群角色介绍 二.集群的搭建 三.history服务 四.使用spark-submit进行计算Pi 五.Spark On Yarn 六.shell脚本 ...

  6. PAT Basic 1045 快速排序 (25 分)

    著名的快速排序算法里有一个经典的划分过程:我们通常采用某种方法取一个元素作为主元,通过交换,把比主元小的元素放到它的左边,比主元大的元素放到它的右边. 给定划分后的 N 个互不相同的正整数的排列,请问 ...

  7. Ubuntu系统---“NVIDIA 驱动+CUDA+cuDNN ”之后 OpenCV安装

    Ubuntu系统---“NVIDIA 驱动+CUDA+cuDNN ”之后 OpenCV安装 目录: 一.OpenCV安装包下载 二.cmake安装 三.OpenCV安装 正文 一.OpenCV安装包下 ...

  8. zend studio 13.6.1汉化包安装方法

    1.这里介绍的是离线汉化包的安装,在线汉化安装总是失败,还是离线的方便 2.汉化安装过程中系统可能会弹出报错,忽略就可以(反正我现在就是忽略了在用着) 下面图片中的链接就是在线安装的链接,不管是在线还 ...

  9. C语言I作业12一学期总结

    一.我学到的内容 二.我的收获 作业 收获 C语言I博客作业01 学会了编程"Hello word" C语言I博客作业02 安装编译器,将代码建立在自己的文件里面 C语言I博客作业 ...

  10. JVM系列-001-JVM监控工具

    JVM系列-001-JVM监控工具 在我们安装的jdk里面的bin目录下有一个jconsole.exe程序.这就是一个JVM的监控工具.我们可以直接打开它,如果配置了环境变量,也可以在命令中直接输入j ...