只是最基本的东西，没啥稀奇的，只是今天看jquery教程的时候偶然看到show()和hide()是可以写两个参数的，

第一个参数是元素隐藏/显示的速度(单位：毫秒)，另一个是一个function类型。

例子如下，消失时会同时向上向左移动并且字体颜色逐渐淡化，元素还会还一直抖动，显示时相反，这种渐变效果挺可爱的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script type="text/javascript"  src="jquery-1.7.1.min.js"></script>

 </head>

 <body>

          <div>

            <h4>我喜欢吃的水果</h4>

            <ul>

                <li>苹果</li>

                <li>甘桔</li>

                <li>梨</li>

            </ul>

            <input id="hidval" type="hidden" value="0"/>

        </div>

        <script type="text/javascript">

            $(function () {

                $("h4").bind("click", function () {

                    //第一种写法

                    if ($("#hidval").val() == 0) {

                            $("ul").hide(3000,function()

                        {

                            $("#hidval").val(1);

                        });

                    } else {

                        $("ul").show(3000,function(){

                            $("#hidval").val(0);

                        });

                    }

                    //第二种写法

                    //$("ul").toggle(3000);

                })

            });

        </script>

 </body>

</html>

JQuery 使用.show()和.hide()做的可爱动画的更多相关文章

  1. [转] jQuery源码分析-如何做jQuery源码分析

    jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. window.requestAnimationFrame() ,做逐帧动画，你值得拥有

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...

  4. jQuery animate方法开发极客标签Logo动画融合效果

    在线演示 本地下载 jQuery的animate方法基础使用,演示如何生成一个jQuery animate方法开发极客标签Logo动画融合效果 相关代码录播:jQuery animate方法开发极客标 ...

  5. UIView封装动画--iOS利用系统提供方法来做转场动画

    UIView封装动画--iOS利用系统提供方法来做转场动画 UIViewAnimationOptions option; if (isNext) { option=UIViewAnimationOpt ...

  6. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  7. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

  8. WPF 后台代码做 TranslateTransform 的动画

    本文告诉大家,在后台代码,对 TranslateTransform 做动画的方法 今天小伙伴问我一个问题,说为什么相同的代码,如果设置到按钮上,是可以让按钮的某个属性变更,但是如果设置给 Transl ...

  9. 11.8 开课二个月零四天 （Jquery取属性值，做全选，去空格）

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. 数据结构与算法(4) -- list、queue以及stack

    今天主要给大家介绍几种数据结构,这几种数据结构在实现原理上较为类似,我习惯称之为类list的容器.具体有list.stack以及queue. list的节点Node 首先介绍下node,也就是组成li ...

  2. python数字取反~

    >>> a = [1,2,3,4,5,7,6,4,2,10] >>> h = len(a)//2 >>> h 5 >>> ~h ...

  3. ES6-babel转码

    关于BaBel转码 有人问我babel的功能以及执行的过程和配置,在网上查阅了大量的资料~收集到这些~有错请指出,及时修改. ------------------------------------- ...

  4. JavaScript单元测试工具-Jest

    标注: 首先这并不是一篇完整的关于Jest的教程,只是个人在接触jest学习的一点随手笔记,大部分内容都是对官方文档的一些翻译. ----------------------------------- ...

  5. 手写DAO框架（二）-开发前的最后准备

    -------前篇:手写DAO框架(一)-从“1”开始 --------- 前言:前篇主要介绍了写此框架的动机,把主要功能点大致介绍了一下.此篇文章主要介绍开发前最后的一些准备.主要包括一些基础知识点 ...

  6. GlobalSign 多域型(SNAs) SSL 证书

    GlobalSign 多域型(SNAs) SSL 证书 GlobalSign 多域型(SNAs) SSL 证书,有别于通配符 SSL 证书可以同时保护一个域名下所有的子域名网站,SANs 证书更进一步 ...

  7. Curious Cupid

    There are K different languages in the world. Each person speaks one and only one language. There ar ...

  8. 20180703mysql运维专题一：利用etl监控mysql日志

    参考地址: https://www.elastic.co/solutions/logging https://www.elastic.co/guide/en/beats/filebeat/curren ...

  9. 微信获得access-token

    微信获得access-token RestTemplate template = new RestTemplate(); String appid = "aa"; String s ...

  10. 1+2+3+...+n不能用while、for、if else等实现

    问题描写叙述 求 1+2+ - +n ,要求不能使用乘除法. for . while . if . else . switch . case 等keyword以及条件推断语句. 实际意义不大,题目涉及 ...