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

<!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 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined） 的解决方法

    首先声明本人资质尚浅,如有错误,欢迎指正.共同提高. ------------------------------------------------------------------------- ...

  2. hashCode 及hashcode与equals的区别

    1.hashCode是jdk根据对象的地址或者字符串或者数字算出来的int类型的数值 详细了解请 参考 [1]  public int hashCode()返回该对象的哈希码值.支持此方法是为了提高哈 ...

  3. 搭建KVM环境——07 带GUI的Linux上安装KVM图形界面管理工具

    清空yum源缓存,并查看yun源 [root@CentOS2 ~]# yum clean all Loaded plugins: fastestmirror, langpacks Cleaning r ...

  4. IIS搭建ASP站点

    1. 进入控制面板悬着打开或者关闭Windows功能. 2. 手工选择需要的功能进行安装. 3. 打开运行Internet信息服务(IIS)管理工具. 4. 展开左侧栏看到“Default Web S ...

  5. Java与CC++交互JNI编程

    哈哈,经过了前面几个超级枯燥的C.C++两语言的基础巩固之后,终于来了到JNI程序的编写了,还是挺不容易的,所以还得再接再厉,戒骄戒躁,继续前行!! 第一个JNI程序: JNI是一种本地编程接口.它允 ...

  6. Autodesk Maya 2019 安装

    为什么我接触到建模了呢,我也不知道.只会弄点桌椅板凳简单动画,希望有时间更进一步学习,毕竟我还有一个开发游戏的梦想. 步骤:下载-安装-激活 Maya吧各版本合集下载 地址:https://pan.b ...

  7. DataSet,DataTable,DataView、DataRelation

    一.创建Dataset和DataTable DataSet ds = new DataSet();//DataSetName默认为"NewDataSet" DataTable ta ...

  8. recyclerview + cardview

    https://www.jianshu.com/p/3a1ea6f78ad5http://qwzs112.iteye.com/blog/2235410https://github.com/mukesh ...

  9. Selenium+Java+Jenkins+TestNg

    注意:各webdriver版本都有对应的浏览器版本 如果启动出现问题,可能是driver路径错误,需要使用System.setProperty("webdriver.firefox.bin& ...

  10. 利用Js的console对象，在控制台打印调式信息测试Js

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛! ...