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

<!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. 第三方应用如何在SAP Kyma上进行服务注册

    Jerry之前的公众号文章 什么?在SAP中国研究院里还需要会PHP开发?提到了一个SAP Kyma的应用场景: 旅行兼社交达人伊森,使用经过SAP Kyma扩展之后的WordPress这个网站来写博 ...

  2. 二叉树BinaryTree构建测试(无序)

    此测试仅用于二叉树基本的性质测试,不包含插入.删除测试(此类一般属于有序树基本操作). //二叉树树类 public class BinaryTree { public TreeNode root; ...

  3. 二零一八阿里p7笔试116题

    1. junit用法,before,beforeClass,after, afterClass的执行顺序 2. 分布式锁 3. nginx的请求转发算法,如何配置根据权重转发 4. 用hashmap实 ...

  4. CentOS7数据库架构之NFS+heartbeat+DRBD（亲测，详解）

    目录 参考文档 理论概述 DRBD 架构 NFS 架构部署 部署DRBD 部署heartbeat 部署NFS及配合heartbeat nfs切记要挂载到别的机器上不要为了省事,省机器 参考文档 htt ...

  5. Flutter——Stack组件（层叠组件）、Align组件、Positioned组件

    Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局. Stack组件 常用于两个子元素. Stack ...

  6. vba代码阅读

    #If Vba7 Then #如果是运行在64位office上 Declare PtrSafe Sub...#Else #如果是运行在32位office上 Declare Sub...#EndIf 在 ...

  7. 一个异常研究InvalidApartmentStateChange

    微软资料:invalidApartmentStateChange MDA 地址:https://docs.microsoft.com/zh-cn/dotnet/framework/debug-trac ...

  8. linux getpid _getpid()

    getpid是一种函数,功能是取得进程识别码,许多程序利用取到的此值来建立临时文件,以避免临时文件相同带来的问题. 函数功能:取得进程识别码 相关函数:fork,kill,getpid 头文件:旧版本 ...

  9. JAVA遇见HTML——JSP篇：JSP基础语法

    动态网页和静态网页的区别: 静态网页 表现形式:网页中的内容是固定,不会更新. 所需技术:HTML,CSS 动态网页 表现形式:网页中的内容通过程序动态显示的,自动更新. 所需技术:HTML,CSS, ...

  10. python_网络编程hmac模块验证客户端的合法性

    hmac模块: 比较两个函数的密钥是否一致: import hmac import os msg = os.urandom(32) #生成32位随机字节码 def wdc(): key = b'wdc ...