jq slideUp slideDown

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .c2{display:none;}

        .c3,.c33{width:100px;height:30px;line-height:30px;text-align:center;border-radius:5px;border:1px solid red;cursor:pointer;}

        .c33{display:none;}

        .span2{-webkit-animation:act 1s linear infinite;animation:act 1s linear infinite;}

        @-webkit-keyframes act{

            0%{-webkit-transform:scale(0.9);}

            20%{-webkit-transform:scale(0.6);}

            50%{-webkit-transform:scale(0.7);}

            70%{-webkit-transform:scale(0.9);}

            80%{-webkit-transform:scale(0.6);}

            90%{-webkit-transform:scale(0.9);}

            100%{-webkit-transform:scale(1);}

        }

        @keyframes act{

            0%{transform:scale(0.9);}

            20%{transform:scale(0.6);}

            50%{transform:scale(0.7);}

            70%{transform:scale(0.9);}

            80%{transform:scale(0.6);}

            90%{transform:scale(0.9);}

            100%{transform:scale(1);}

        }

    </style>

</head>

<body>

<div class="c1">我是好人</div>

<div class="c2">

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

    <p>我是好人</p>

</div>

<div class="c3"><span class="span1">显示</span><span class="span2">↓</span></div>

<div class="c33"><span class="span1">隐藏</span><span class="span2">↑</span></div>

</body>

<script src="js/jquery-1.11.3.min.js"></script>

<script>

    $(".c3,.c33").bind("click",function(){

        /*$(".c3").html()=="显示"?$(".c3").html("隐藏"):$(".c3").html("显示");*/

        if($(".span1").html()=="显示"){

            $(".c2").slideDown(2000,function(){

                $(".span1").html("隐藏");

                $(".c3").css("display","none")

                $(".c33").css("display","block");

            });

           /* $(".span2").html("↑")*/

        }else{

            $(".c2").slideUp(2000,function(){

                $(".span1").html("显示");

                $(".c3").css("display","block")

                $(".c33").css("display","none");

            })

            /*$(".span2").html("↓")*/

        }

    })

</script>

</html>

jq slideUp slideDown的更多相关文章

原生js造轮子之模仿JQ的slideDown()与slideUp()
代码如下: const slider = (function() { var Slider = {}; // the constructed function,timeManager,as such ...
让zepto支持slideup(),slidedown()
zepto不支持slideup()和slidedown():使用以下方法可以支持该功能 <div class="slide"> <p> zepto不支持sl ...
微信小程序之实现slideUp和slideDown效果和点击空白隐藏
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...
关于slideup和slidedown 鼠标多次滑过累积的动画效果
stop() 方法停止当前正在运行的动画包括animation动画和slideup/slidedown动画例如:鼠标经过一个元素时,执行一个slide动画,多次快速经过,不处理的话这个元素会保留累 ...
jq slideDown后里面的A链接失效（已解决）
jq slideDown后里面的A链接失效(解决) 用jq 的 slideDown写了一个二级下拉菜单,但是里面的a标签全部失效了,挂的链接右键菜单可以正常打开,但是左键正常点击不行查阅了很多资料, ...
【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
JQ初级
一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 jQuery是一个简洁高效的且功能丰富的JavaScript工具库 2.jQuery的优势 ...
JQ笔记-加强版
Query初级一.介绍.基本写法什么是JQ: 一个优秀的JS库,大型开发必备 JQ的好处: 简化JS的复杂操作不再需要关心兼容性提供大量实用方法如何学习JQ: www.jquery. ...
jq学习总结之方法
三.方法 1.length 2.index()3.get() reverse()4.not()5.filter()6.find()7.each()8.addBack()9.attr()10.toggl ...

随机推荐

javascript实现非递归--归并排序
另一道面试题是实现归并排序,当然,本人很不喜欢递归法,因为递归一般都是没有迭代法好.所以首选都是用迭代法,但是迭代法确实是难做啊,至底而上的思想不好把握. 这是我的实现代码 /* * * 非递归版归并 ...
HDU4549 M斐波那契数列矩阵快速幂+欧拉函数+欧拉定理
M斐波那契数列 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Total Sub ...
三、java中的流程控制
流程控制:1.分类:顺序结构.选择结构.循环结构.2.顺序结构:依次执行.3.选择结构:if.if...else.if...else if...else:三目运算符(表达式?为true的执行语句:为f ...
编写一个Java程序，计算一下1,2,…,9这9个数字可以组成多少个互不相同的、无重复数字的三位偶数。
package a; public class SanWeiOuShu { public static void main(String[] args) { String str="1234 ...
<转>32位移植到64位注意事项
32bit-64bit porting work注意事项 64位服务器逐步普及,各条产品线对64位升级的需求也不断加大.在本文中,主要讨论向64位平台移植现有32位代码时,应注意的一些细小问题. 什么 ...
5.mybatis一对一表关联查询
方式一:嵌套结果:使用嵌套结果映射来处理重复的联合结果的子集,封装联表查询的数据(去除重复的数据) SELECT * FROM class c,teacher t WHERE c.tid = t.t ...
C# DataGridView控件绑定数据后清空数据
//1.this.dataGridView1.DataSource = null;//会将DataGridView的列也删掉 //2.this.dataGridView1.Columns.Clear( ...
"npm ERR! Error: EPERM: operation not permitted"问题解决
在基于macaca进行自动化测试的时候,遇到如下问题: E:\AutoTest\Macaca\LocalTEST\macaca-test-sample\macaca-test>macaca do ...
对称加密DES和TripleDES
一. 对称加密对称加密,是一种比较传统的加密方式,其加密运算.解密运算使用的是同样的密钥,信息的发送者和信息的接收者在进行信息的传输与处理时,必须共同持有该密码(称为对称密码).因此,通信双方都必 ...
git fork
http://help.github.com/fork-a-repo/ 概要: 克隆别人的代码库到自己的项目中,可以作为子模块的形式使用,或二次开发操作流程: 在开源项目中点击fork按钮,稍等一会 ...

jq slideUp slideDown

jq slideUp slideDown的更多相关文章

随机推荐

热门专题