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

<!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. FTP下载文件和操作系统的关系

    标题不知道该怎么写了. 最近调试AGPS,嵌入式设备需要从FTP服务器上下载星历数据,星历数据是二进制数据.嵌入式设备下载完数据后和原始数据对比,发现数据量变大了(但是通过pc端的FTP软件下载下来的 ...

  2. Tornado目录

    第一篇:白话tornado源码之一个脚本引发的血案 第二篇:白话tornado源码之待请求阶段 第三篇:白话tornado源码之请求来了 第四篇:白话tornado源码之褪去模板外衣的前戏 第五篇:白 ...

  3. Go语言——值方法 & 指针方法

    1 package main import ( "fmt" "sort" ) type SortableStrings []string type Sortab ...

  4. 第一课 IP通信

       我们的专业课:<IP通信>开课了.    在第一节课,我们初步了解了关于通信的知识,涨了知识,下面我就说一下第一节课所学所感.    在学习这门课的时候,需要我们认真预习,认真听课, ...

  5. idou老师教你学Istio 15：Istio实现双向TLS的迁移

    在Istio中,双向TLS是传输身份验证的完整堆栈解决方案,它为每个服务提供可跨集群的强大身份.保护服务到服务通信和最终用户到服务通信,以及提供密钥管理系统.本文阐述如何在不中断通信的情况下,把现存I ...

  6. springboot @value 注解的使用

    1,通过@value来注入对应的值,直接在字段上添加@value 获取application.properties文件中的值. @Configuration public class DemoConf ...

  7. Python中的memoryview

    Python中的memoryview提供了类似C语言指针的功能,有了memoryview,如果某个Object支持buffer protocol,那么就可以通过memory去访问到他的内部. Pyth ...

  8. ACM-ICPC 2018 沈阳赛区现场赛 K. Let the Flames Begin （约瑟夫环问题）

    题目链接: 题意:有 n 个人围成一个圈,从 1 开始报到第 k 个人出环,问第 m 个出环的人是谁,n.m.k <= 1e18 且 min(m,k)<= 2e6. 题解:容易得出O(m) ...

  9. chrome插件编写中需要了解的几个概念和一些方法

    1.插件文件结构 1.1.manifest.json 每一个扩展.可安装的WebApp.皮肤,都有一个JSON格式的manifest文件,里面存放重要的插件相关信息. 一个最基本的配置例子: { &q ...

  10. C#分隔字符串时遭遇空值

    在C#中分隔字符串时,按特定字符进行分隔的时候可能会遇到空值,如何我现在传入的是Id的字符串,如:"1501,1502,1503,,1505",以逗号分隔,由于各种原因,导致传入的 ...